React项目在ios和安卓端要做一个渐变色背景,用css不支持,可使用react-native-linear-gradient

以上有个模块是灰色逐渐到白的背景色过渡

如果是css,以下代码就直接搞定

bash 复制代码
 background: linear-gradient(180deg, #F6F6F6 0%, #FFF 100%);

但是在RN中不支持这种写法,那应该写呢?

1.引入react-native-linear-gradient插件,我使用的是^2.6.2版本

bash 复制代码
import LinearGradient from 'react-native-linear-gradient';

2定义颜色

bash 复制代码
private get linearGradientProps() {
    return {
      colors: ['#F6F6F6', '#FFF'],
      locations: [0, 1],
      style: {
        borderTopLeftRadius: getPx(8),
        borderTopRightRadius: getPx(8),
        borderBottomRightRadius: getPx(8),
        borderBottomLeftRadius: getPx(8)
      }
    };
  }

3.引用组件

bash 复制代码
 <LinearGradient {...this.linearGradientProps}>
 	哈哈哈渐变背景色
 </LinearGradient>
相关推荐
编程之路从0到113 分钟前
React Native新架构之Android端初始化源码分析
android·react native·源码阅读
行稳方能走远14 分钟前
Android java 学习笔记2
android·java
前端_yu小白15 分钟前
React实现Vue的watch和computed
前端·vue.js·react.js·watch·computed·hooks
编程之路从0到136 分钟前
React Native 之Android端 Bolts库
android·前端·react native
lili-felicity37 分钟前
React Native 鸿蒙跨平台开发:Animated 实现鸿蒙端组件的旋转 + 缩放组合动画
react native·react.js·harmonyos
爬山算法39 分钟前
Hibernate(38)如何在Hibernate中配置乐观锁?
android·java·hibernate
Murrays1 小时前
【React】01 初识 React
前端·javascript·react.js
康一夏1 小时前
CSS盒模型(Box Model) 原理
前端·css
web前端1231 小时前
React Hooks 介绍与实践要点
前端·react.js