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>
相关推荐
欢喜躲在眉梢里21 小时前
mysql中的日志
android·运维·数据库·mysql·adb·日志·mysql日志
路上^_^1 天前
安卓基础组件019-引导页布局001
android·安卓
二狗mao1 天前
React学习(一)描述UI
react.js
梦终剧1 天前
【Android之路】UI消息循环机制
android·ui
zh_xuan1 天前
Android android.util.LruCache源码阅读
android·源码阅读·lrucache
梦终剧1 天前
【Android之路】安卓资源与编译初步
android
zhangxuyu11181 天前
flex布局学习记录
前端·css·学习
mykrecording1 天前
launch Activity流程
android·app
不知名的前端专家1 天前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app
ClassOps1 天前
Android Studio Logcat中 杀死应用
android·android studio·logcat