天天看点

React-Native踩坑记录二

1.Image组件的borderRadius画圆有平台兼容性问题,在IOS下会失效

解决方法有几种

(1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法

(2)在同一级属性块下加上overflow: 'hidden',我没试过,大家可以阅读下面的链接

https://www.jianshu.com/p/d237f0258418

2.React-Native的渐变实现方案

(1) 使用react-native-linear-gradient:https://github.com/react-native-community/react-native-linear-gradient

(2) 让设计直接提供渐变的背景图片,简单粗暴

3.React-Native的阴影实现方案

(1)借助react-native-shadow模块实现(需要引入其他原生代码)

(2)借助react-native-shadow-card模块实现(不需要引入其他原生代码)

(3)自己实现,通过shadowOpacity等原生属性单独实现对IOS的兼容,通过elevation属性单独实现对Android的兼容,实际上这也是react-native-shadow-card的做法

(4)让设计直接提供阴影的背景图片,简单粗暴

4.Animated插值的用法

插值映射的时候,outputRange可以是一个 “数字 + 特殊字符”的形式,例如

outputRange: ['0%', '100%']

或者

outputRange: ['0deg', '100deg']

或者

width: this.state.progress.interpolate({

inputRange: [0, 1],

outputRange: ['0%', '100%']

})

5.RN动画三板斧

第一步:初始化动画值

this.state = {

progress: new Animated.Value(0)

};

第二步:改变动画值

Animated.timing(this.state.progress, {

toValue: endRatio,

duration: 800,

easing: Easing.inOut(Easing.ease)

// easing: Easing.linear()

}).start();

第三步:取值放进Animated.View中(必须用Animated下的组件)

const localStyle = {

width: this.state.progress.interpolate({

inputRange: [0, 1],

outputRange: ['0%', '100%']

})

};

return

6.style对象的格式

style对象不一定强制要求用StyleSheet.create包裹,普通的对象字面量也可以写入组件的style属性当中

7. fontWeight的取值

可以控制字体粗细,取值有“normal”,"bold","100" ~ "900",其中 “400”是正常,“700”是"bold"

{

fontWeight: "100"

}

8.Image的长度最好不要使用比例

Image的长度定义最好使用固定的px,如果使用比例控制长度的话,会遇到不太好处理的情况

9. 自定义弹框实现方案

选用生态:react-native-root-siblings

原理:重写AppRegistry.registerComponent,然后插入元素