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>
相关推荐
用户0273851840261 天前
[Android]RecycleView的item用法
android
前行的小黑炭1 天前
Android :为APK注入“脂肪”,论Android垃圾代码在安全加固中的作用
android·kotlin
帅得不敢出门1 天前
Docker安装Ubuntu搭建Android SDK编译环境
android·ubuntu·docker
tangweiguo030519871 天前
Android Kotlin 动态注册 Broadcast 的完整封装方案
android·kotlin
fatiaozhang95271 天前
浪潮CD1000-移动云电脑-RK3528芯片-2+32G-安卓9-2种开启ADB ROOT刷机教程方法
android·网络·adb·电脑·电视盒子·刷机固件·机顶盒刷机
前行的小黑炭1 天前
Android 不同构建模式下使用不同类的例子:如何在debug模式和release模式,让其使用不同的类呢?
android·kotlin·gradle
kk不中嘞1 天前
浅谈前端框架
前端·vue.js·react.js·前端框架
andyguo1 天前
AI模型测评平台工程化实战十二讲(第一讲:从手工测试到系统化的觉醒)
android
2501_915921431 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
幂简集成1 天前
通义灵码 AI 程序员低代码 API 课程实战教程
android·人工智能·深度学习·神经网络·低代码·rxjava