react-native-linear-gradient颜色渐变
2024-09-30 05:56:15
一 安装
npm i react-native-linear-gradient
react-native link react-native-linear-gradient
二 使用
2.1 colors
默认情况下,渐变色的方向是从上向下的
<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{height: 150}}>
</LinearGradient>
2.2 start / end
你想渐变色从左向右,或者斜角渐变,就需要设置下了
start:{ x: number, y: number }
end:{ x: number, y: number }
start 就是渐变开始的位置,x、y 范围是 0 - 1 ,
end 同上,就是渐变结束的位置
eg1:斜角渐变
start: { x: 0.3, y: 0.4 } 渐变是从 左侧30%, 上部 40% 开始
end: { x: 0.7, y: 0.8 } 渐变是从 左侧70%, 上部 80% 结束
<LinearGradient
start={{x: 0.25, y: 0.25}}
end={{x: 0.75, y: 0.75}}
colors={['red', 'green', 'black']}
style={{height: 150, flex: 1}}>
</LinearGradient>
eg2: 从左到右
从左到右的渐变就可以设置出来了
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}
2.2 locations
假如想指定每种渐变颜色的范围,比如红色占20%, 绿色占70%,黑色占10%,也是可以设置的,就用到了另外一个属性了 locations
locations 对应的是 colors
locations={[0.2,0.7,1.0]}
colors={['red', 'green', 'black']}
red 范围就是 0.0 - 0.2
green 范围就是 0.2 - 0.7
black 范围就是 0.7 - 1.0
eg1: 0.4是渐变的起点,0.6是渐变的终点
colors={['red', 'green', 'black']}
locations={[0.4,0.5,0.6]}
最新文章
- SpringMVC 自定义一个拦截器
- css居中总结
- HDU3344(小广搜+小暴力
- Android程序启动加载动画实现
- nginx proxy_pass
- ubuntu下安装基本配置
- vs2010 dll生成,使用问题[good]
- leetcode Longest Common Prefix 多个字符串的最长字串
- angular.js 简单的表达式
- Bootstrap(2)整体架构
- Windows 下安装 Oracle 12c 教程
- 利用css来让一个div在页面中垂直居中的方法
- linux内核移植到S5pv210
- VB6之阴影图层
- break #立即终止本次循环
- IDEA复制某个类的包名路径
- C++类的大小计算
- Mysql主从复制读写分离
- 22 初始模块 random time collections functools
- 如果没有 Android 世界会是什么样子?
热门文章
- GPIO硬件资源的申请,内核空间和用户空间的数据交换,ioctl(.....),设备文件的自动创建
- Geotools求shapefile路网中任意两点之间最短路径的距离
- 痞子衡嵌入式:串行EEPROM接口事实标准及SPI EEPROM简介
- Non-local Neural Networks 原理详解及自注意力机制思考
- ES6 Map 原理
- 学习记录:《C++设计模式——李建忠主讲》1.设计模式
- (三十五)golang--面向对象之多态
- myBaits持久性框架
- sql注入问题回顾
- mr的partition分区