跳到主要内容

LinearGradient 线性渐变

因为RN不支持通过css编写渐变,所以写了这个组件用于实现渐变功能

这个组件在RN端是使用Svg模拟实现的

这个组件的使用会有一些兼容性的差异,建议将这个组件作为背景使用

示例

import { LinearGradient, px } from '@/duxui'

<LinearGradient colors={['#e94727', '#6661ee']} style={{ height: px(200) }}></LinearGradient>

// 从左到右
<LinearGradient colors={['#e94727', '#6661ee']} useAngle angle={90} style={{ height: px(200) }}></LinearGradient>

Props

继承自Taro的View Props

colors

渐变色列表

类型必填默认值
[string, string]

locations

渐变色在渐变中的位置,必须是一个有序数组,取值范围为[0, 1]

类型必填默认值
[number, number]

useAngle

是否使用角度控制渐变方向,默认值为false

类型必填默认值
booleanfalse

angle

渐变角度,顺时针方向,单位为度,默认值为0 从上到下

useAngle 设置为ture是可用

类型必填默认值
number0

start

渐变开始位置,取值范围[0, 1]

{
x: 0,
y: 0
}

end

渐变结束位置,取值范围[0, 1]

{
x: 0,
y: 0
}