React-Native踩坑记录二

1.Image组件的borderRadius画圆有平台兼容性问题，在IOS下会失效
2.React-Native的渐变实现方案
3.React-Native的阴影实现方案
4.Animated插值的用法
5.RN动画三板斧
6.style对象的格式
7. fontWeight的取值
8.Image的长度最好不要使用比例
9. 自定义弹框实现方案

正文

回到顶部

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