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>
相关推荐
struggle20254 分钟前
VoltAgent 是一个开源 TypeScript 框架,用于构建和编排 AI 代理
javascript·css·人工智能·typescript·开源
YSoup14 分钟前
2025年目前最新版本Android Studio自定义xml预览的屏幕分辨率
android·xml·android studio
stevenzqzq33 分钟前
android lifeCycleOwner生命周期
android
一只鱼^_1 小时前
用JS实现植物大战僵尸(前端作业)
javascript·css·vscode·游戏引擎·游戏程序·html5·动画
魔云连洲1 小时前
使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果
前端·css·sass
每次的天空3 小时前
Android第十一次面试补充篇
android·面试·职场和发展
babicu1237 小时前
CSS Day07
java·前端·css
FindYou.8 小时前
Android之ListView
android
鬼多不菜10 小时前
一篇学习CSS的笔记
java·前端·css
祺简10 小时前
CSS--background-repeat详解
前端·css