Figma中的CSS线性渐变如何转换为react-native-linear-gradient

参数映射规则 #

• 180deg 角度适配：CSS 中 180deg 为纯垂直从上到下的渐变，因组件坐标原点在左上角，将start设为组件顶部、end设为组件底部，保证两点x坐标一致，即可对齐渐变方向。
• 色标位置适配：CSS 中的百分比色标直接除以100转为0-1区间的小数，按顺序传入locations数组，与同索引的颜色值一一对应即可。
• 版本注意：2.5.1 版本的自定义色标 prop 为复数形式locations，单写location不会生效。

修正后代码 #

<LinearGradient 
  start={{x: 0, y: 0}} 
  end={{x: 0, y: 1.0}}
  locations={[0.2666, 1]}
  colors={['#0097F3', 'rgba(255, 255, 255, 0.1)']}
  style={{flex: 1}}
>
  {/* 业务子节点 */}
</LinearGradient>

原代码问题修正 #

• 原代码start、end存在x方向偏移，会导致渐变线倾斜，和180deg垂直效果不符
• 原代码location拼写错误，会导致自定义色标逻辑失效
• 原代码的色标数值未对齐Figma导出的26.66%、100%位置要求，过渡区间错误

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