如何用react-native-linear-gradient实现SVG同款线性渐变

先拆解SVG里的核心渐变信息：

• 渐变方向：从(642.63, -71.5962)到(3.27769, 38.4169)（基于SVG用户坐标系），对应从容器右上外侧指向左下内侧的斜向渐变
• 颜色节点：#FF4B00（起始色）、#D057BD（结束色）
• 容器样式：宽287、高51、圆角8

最终实现代码 #

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

// 在组件中引入使用
<LinearGradient
  colors={['#FF4B00', '#D057BD']}
  start={{ x: 1, y: -0.204 }}
  end={{ x: 0, y: 0.764 }}
  style={{
    width: 287,
    height: 51,
    borderRadius: 8,
  }}
>
  {/* 这里可添加自定义内容 */}
</LinearGradient>

参数说明 #

• start/end坐标：通过计算SVG渐变线与容器边界的交点，转换为组件相对比例（超出0-1范围仍可生效），完美匹配原SVG的渐变角度
• 颜色数组：直接对应SVG的两个颜色节点，顺序保持一致
• 容器样式：完全复刻SVG矩形的宽、高和圆角参数，保证外观统一

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