线性渐变区域

功能说明

线性渐变区域，可以作为背景或者半透明遮罩等

截图

!Kapture 2021-09-26 at 10.35.12

支持渠道

✅ 已支持 🔶 部分支持 ❌ 尚未支持 🚫 不能支持 🚚 开发中 ❓ 尚未验证

| RN | WXAPP | ALIAPP | TT | H5 | H5_WX | H5_ALIPAY | H5_SuperAPP |
| :-: | :---: | ------ | :-: | :-: | :---: | :-------: | :---------: |
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

示例+说明

``javascript
...
import CptLinearGradient from '@/cptLinearGradient'

const colors = [{color: '#ff6955', opacity:1}, { color: '#32cd32',opacity: 0.5 }, { color: '#708090',opacity: 0.5 }, { color: '#00ffff',opacity: 0.5 }]

...
style={{ width: Taro.pxTransform(400), height: Taro.pxTransform(200)}}
startColor='red'
endColor='#00FF00'
rotate={45}
startOpacity={0.5}
colors={colors}
/>
``

参数

| APIs | 说明 | 是否必须 | 默认 |
| ------------ | :---------------------------------: | :------: | ------- |
| style | 样式 | 否 | |
| rotate | 旋转(默认从上到下，取值范围[0,360]) | 否 | 0 |
| startColor | 起始颜色 (支持 white 和#FFFFFF) | 否 | #ffffff |
| endColor | 结束颜色 (支持 white 和#FFFFFF) | 否 | #ffffff |
| startOpacity | 起始透明度 | 否 | 0 |
| endOpacity | 结束透明度 | 否 | 1 |
| colors | 多个渐变色设置 | 否 | [] |

colors

| colors | 说明 | 是否必须 | 默认 |
| ------- | :---------------: | :------: | ----------------------- |
| color | 颜色 | 是 | |
| opacity | 透明度 | 是 | 1 |
| offset | 偏移量 【0-100%】 | 否 | 默认按照 color 数量平分 |

注意

1. 在 rn 端，修改组件属性不会更新本组件，请使用 key 值来强制更新本组件
2. [startColor, endColor] 与 colors 属性只能提供一种，同时提供会以 colors 属性为准
3. offset 要么全部设置, 要么全部不设置