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，然后插入元素
腾讯云开发者
