如何在react-native-svg的LinearGradient中实现固定色块分段效果？

要实现分段纯色的效果，你需要在每个颜色切换的偏移位置重复设置两个相同偏移量的Stop节点——一个用当前颜色结束，另一个用下一个颜色开始，这样两个颜色在同一位置直接衔接，不会产生平滑过渡，呈现出纯色块分段的效果。

修改后的LinearGradient代码（适配你的三色分段需求） #

<LinearGradient
  id="gradient"
  start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}}
>
  {/* 第一段：0% - 33.33% 纯色绿色 */}
  <Stop offset="0%" stopColor="green" stopOpacity={1} />
  <Stop offset="33.33%" stopColor="green" stopOpacity={1} />
  {/* 第二段：33.33% - 66.66% 纯色红色 */}
  <Stop offset="33.33%" stopColor="red" stopOpacity={1} />
  <Stop offset="66.66%" stopColor="red" stopOpacity={1} />
  {/* 第三段：66.66% - 100% 纯色蓝色 */}
  <Stop offset="66.66%" stopColor="blue" stopOpacity={1} />
  <Stop offset="100%" stopColor="blue" stopOpacity={1} />
</LinearGradient>

原理说明 #

• 每个纯色块的起始偏移和结束偏移都设置相同颜色的Stop，确保该区间内颜色完全一致。
• 在两个色块的分界点（比如33.33%），同时设置前一个颜色的结束Stop和后一个颜色的起始Stop，这样颜色会直接切换，没有渐变过渡。

如果你需要两段纯色（比如0-50%绿，50-100%红） #

可以简化为：

<LinearGradient
  id="gradient"
  start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}}
>
  <Stop offset="0%" stopColor="green" stopOpacity={1} />
  <Stop offset="50%" stopColor="green" stopOpacity={1} />
  <Stop offset="50%" stopColor="red" stopOpacity={1} />
  <Stop offset="100%" stopColor="red" stopOpacity={1} />
</LinearGradient>

直接替换你原有代码中的LinearGradient部分即可实现需求。

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