如何将CSS linear-gradient转换为React Native LinearGradient组件参数

属性对应关系 #

• start / end：对应CSS linear-gradient 里的角度参数，用来定义渐变的方向。两个属性均为{x: 数值, y: 数值}格式的相对坐标，取值范围0~1，{x:0, y:0}代表渐变容器的左上角，{x:1, y:1}代表容器右下角。
• locations：对应CSS渐变中每个色值后的位置百分比参数，是和颜色数量一一对应的数组，取值可超出0~1范围，0代表渐变起始位置，1代表渐变结束位置。
• 组件的colors属性对应CSS渐变里的色值列表。

转换步骤 #

通用转换规则 #

1. 角度转start/end坐标
   CSS渐变角度是从正上方向顺时针旋转的度数，可按规则换算坐标：

常用角度坐标对应：

• 0°（从上到下）：start = {x: 0.5, y: 0}，end = {x: 0.5, y: 1}
• 90°（从左到右）：start = {x: 0, y: 0.5}，end = {x: 1, y: 0.5}
• 180°（从下到上）：start = {x: 0.5, y: 1}，end = {x: 0.5, y: 0}
• 270°（从右到左）：start = {x: 1, y: 0.5}，end = {x: 0, y: 0.5}
  任意角度θ的计算方式：先转弧度，x轴偏移量为sin(θ*π/180)，y轴偏移量为-cos(θ*π/180)，再将坐标归一化到0~1范围即可。

2. 百分比转locations数值
   直接将CSS里的位置百分比除以100即可，超出0~1的数值可直接保留。
3. 提取色值到colors数组
   按顺序复制CSS渐变里的色值即可。

针对你提供的渐变的转换结果 #

你给出的CSS代码linear-gradient(315.43deg, #706EB6 -6.67%, #A57FCF 106.6%)换算后参数如下：

• 315.43°属于从右下角指向左上角的方向，对应start={{x: 1, y: 1}}，end={{x: 0, y: 0}}，误差极小可直接使用
• 位置百分比换算后locations={[-0.0667, 1.066]}
• 色值数组colors={['#706EB6', '#A57FCF']}

最终实现代码 #

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

<LinearGradient
  colors={['#706EB6', '#A57FCF']}
  start={{x: 1, y: 1}}
  end={{x: 0, y: 0}}
  locations={[-0.0667, 1.066]}
  style={{/* 自定义容器样式 */}}
>
  {/* 子组件内容 */}
</LinearGradient>

内容的提问来源于stack exchange，提问作者Abdo Rabah