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>
相关推荐
玉米Yvmi3 分钟前
从零理解 CSS 弹性布局:轻松掌控页面元素排布
前端·javascript·css
西洼工作室3 分钟前
前端js汉字手写练习系统
前端·javascript·css
走在路上的菜鸟26 分钟前
Android学Dart学习笔记第二十一节 类-点的简写
android·笔记·学习·flutter
QQ12958455041 小时前
ThingsBoard-修改Android APP应用程序名和描述
android·物联网·iot
代码代码快快显灵1 小时前
Android项目架构深度解析
android
Flystone1 小时前
CSS 有什么奇技淫巧?
css
丐中丐9992 小时前
一个Binder通信中的多线程同步问题
android
我血条子呢2 小时前
【CSS】类似渐变色弯曲border
前端·css
诸神黄昏EX2 小时前
Android Qualcomm USB 专题系列【篇二:UsbGadget模式配置】
android
vocal2 小时前
【我的AOSP第一课】Android Init 语言与 rc 文件
android