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>
相关推荐
SharpCJ5 小时前
Android 开发者为什么必须掌握 AI 能力?端侧视角下的技术变革
android·ai·aigc
_李小白6 小时前
【OSG学习笔记】Day 38: TextureVisitor(纹理访问器)
android·笔记·学习
JJay.6 小时前
Kotlin 高阶函数学习指南
android·开发语言·kotlin
jinanwuhuaguo6 小时前
截止到4月8日,OpenClaw 2026年4月更新深度解读剖析:从“能力回归”到“信任内建”的范式跃迁
android·开发语言·人工智能·深度学习·kotlin
哟哟耶耶6 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
不是az7 小时前
CSS知识点记录
前端·javascript·css
JJay.7 小时前
Android Kotlin 协程使用指南
android·开发语言·kotlin
BLUcoding8 小时前
Android 布局介绍
android
summerkissyou19878 小时前
android-蓝牙-状态和协议值总结及监听例子
android·蓝牙
徒 花8 小时前
数据库知识复习05
android·数据库