React项目在ios和安卓端要做一个渐变色背景,用css不支持,可使用react-native-linear-gradient
以上有个模块是灰色逐渐到白的背景色过渡
如果是css,以下代码就直接搞定
background: linear-gradient(180deg, #F6F6F6 0%, #FFF 100%);
但是在RN中不支持这种写法,那应该写呢?
1.引入react-native-linear-gradient插件,我使用的是^2.6.2版本
import LinearGradient from 'react-native-linear-gradient';
2定义颜色
private get linearGradientProps() {return {colors: ['#F6F6F6', '#FFF'],locations: [0, 1],style: {borderTopLeftRadius: getPx(8),borderTopRightRadius: getPx(8),borderBottomRightRadius: getPx(8),borderBottomLeftRadius: getPx(8)}};}
3.引用组件
<LinearGradient {...this.linearGradientProps}>哈哈哈渐变背景色</LinearGradient>