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>
相关推荐
小桥风满袖1 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
前端小盆友1 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Hilaku1 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
jyan_敬言2 小时前
【C++】string类(二)相关接口介绍及其使用
android·开发语言·c++·青少年编程·visual studio
程序员老刘2 小时前
Android 16开发者全解读
android·flutter·客户端
Cacciatore->2 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~2 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末3 小时前
React——基础
前端·react.js·前端框架
每天开心3 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
福柯柯3 小时前
Android ContentProvider的使用
android·contenprovider