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 小时前
【前端】CSS Flexbox布局示例介绍
前端·css
是你的小橘呀2 小时前
【CSS】揭秘 CSS 浮动:让元素乖乖排队的 "魔法咒语"
css
前端小咸鱼一条2 小时前
React组件化的封装
前端·javascript·react.js
南方kenny2 小时前
TypeScript + React:让前端开发更可靠的黄金组合
前端·react.js·typescript
2501_915918412 小时前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
JuneXcy3 小时前
11.Layout-Pinia优化重复请求
前端·javascript·css
CF14年老兵3 小时前
✅ Next.js 渲染速查表
前端·react.js·next.js
_祝你今天愉快3 小时前
Java-JVM探析
android·java·jvm
dyb3 小时前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
飞天卡兹克4 小时前
forceStop流程会把对应进程的pendingIntent给cancel掉
android