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>
相关推荐
Ziky学习记录11 分钟前
从零到实战:React Router 学习与总结
前端·学习·react.js
Haha_bj12 分钟前
Flutter ——device_info_plus详解
android·flutter·ios
前端小伙计17 分钟前
Android/Flutter 项目统一构建配置最佳实践
android·flutter
青青家的小灰灰1 小时前
React 19 核心特性与版本优化深度解析
react.js
却尘2 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
Mr_sun.2 小时前
Day09——入退管理-入住-2
android·java·开发语言
ujainu3 小时前
告别杂乱!Flutter + OpenHarmony 鸿蒙记事本的标签与分类管理(三)
android·flutter·openharmony
会一丢丢蝶泳的咻狗3 小时前
Sass实现,蛇形流动布局
前端·css
常利兵4 小时前
Android内存泄漏:成因剖析与高效排查实战指南
android
·云扬·4 小时前
MySQL 8.0 Redo Log 归档与禁用实战指南
android·数据库·mysql