当前位置: 首页 > news >正文

React项目在ios和安卓端要做一个渐变色背景,用css不支持,可使用react-native-linear-gradient

在这里插入图片描述
以上有个模块是灰色逐渐到白的背景色过渡
如果是css,以下代码就直接搞定

 background: linear-gradient(180deg, #F6F6F6 0%, #FFF 100%);

但是在RN中不支持这种写法,那应该写呢?
1.引入react-native-linear-gradient插件,我使用的是^2.6.2版本

import LinearGradient from 'react-native-linear-gradient';

2定义颜色

private get linearGradientProps() {return {colors: ['#F6F6F6', '#FFF'],locations: [0, 1],style: {borderTopLeftRadius: getPx(8),borderTopRightRadius: getPx(8),borderBottomRightRadius: getPx(8),borderBottomLeftRadius: getPx(8)}};}

3.引用组件

 <LinearGradient {...this.linearGradientProps}>哈哈哈渐变背景色</LinearGradient>

相关文章:

  • CSS级联样式(基础知识)备忘录
  • Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(五):语音合成输出与交互增强
  • 内存监控方法与要点详解
  • 知识图谱增强的大型语言模型编辑
  • css实现文字渐变
  • Marshalling与Demarshalling深度解析
  • 大语言模型 24 - MCP 自动操作 提高模型上下文能力 Cursor + Sequential Thinking Server Memory
  • Cangjie 中的值类型与引用类型
  • c# 获取电脑 分辨率 及 DPI 设置
  • CQF预备知识:Python相关库 -- NumPy 基础知识 - 线性代数 numpy.linalg
  • 得物前端面试题及参考答案(精选50道题)
  • 从认识AI开始-----解密门控循环单元(GRU):对LSTM的再优化
  • 单细胞注释前沿:CASSIA——无参考、可解释、自动化细胞注释的大语言模型
  • RabbitMQ vs MQTT:深入比较与最新发展
  • 学习vue3阶段性复习(插槽,Pinia,生命周期)
  • 【技能篇】RabbitMQ消息中间件面试专题
  • 运维 pgsql 安装完后某次启动不了
  • 00 QEMU源码中文注释与架构讲解
  • 宝塔部署 Vue + NestJS 全栈项目
  • 【开源工具】音频格式转换大师:基于PyQt5与FFmpeg的高效格式转换工具开发全解析
  • 网站策划任职要求/宁波seo外包方案
  • 门户网站建设招标书/推广链接让别人点击
  • 网站建设主机/网络推广是啥
  • 推文最好的网站是哪个/太原网站建设谁家好
  • 网站开发视频是存储的/武汉seo主管
  • 个人网站可以做淘宝推广/内容营销是什么意思