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>
相关推荐
alexhilton13 小时前
藏在设备上的秘密,终究藏不住
android·kotlin·android jetpack
狗狗狗狗狗乐啊16 小时前
搭一个 AI 对话工作台 AChat:从 0 到可用的完整记录(一)
python·react.js·ai编程
hai_android19 小时前
Kotlin / Android 常用函数使用示例手册
android·java·kotlin
hai_android20 小时前
Android MeasureSpec 详解
android·java·kotlin
扶苏100221 小时前
CSS 图标换色指南:用 brightness / invert / mask 把任意图片改成想要的颜色
css
我命由我1234521 小时前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
又见情义1 天前
RK3568 Android 13 本地 U 盘 OTA 升级实战:基于 RKUpdateService 的完整流程
android
Godikov1 天前
Android10后台弹窗与APK自动更新
android
又见情义1 天前
RK3568 Android 13 USB OTG/Host 切换调试经验分享
android
终端安全笔记1 天前
iOS 27 之后「策略空转」:设备升级不报错,但旧策略不再管它
android·网络·安全·ios·智能手机