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>
相关推荐
华仔啊31 分钟前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
GOATLong32 分钟前
MySQL内置函数
android·数据库·c++·vscode·mysql
明月与玄武40 分钟前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
onthewaying2 小时前
Android SurfaceTexture 深度解析
android·opengl
茄子凉心2 小时前
Android Bluetooth 蓝牙通信
android·蓝牙通信·bluetooth通信
00后程序员张3 小时前
iOS 26 App 运行状况全面解析 多工具协同监控与调试实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916007474 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆、加固与发布治理(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
2501_915918414 小时前
怎么上架 App?iOS 应用上架完整流程详解与跨平台发布实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_929157684 小时前
【安卓+PC+IOS】psp全中文游戏+高清纹理包+金手指
android·游戏·ios
2501_916008894 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview