如何调整React Native组件线性渐变的白色中间区域占比？

要实现上下窄红渐变、中间宽纯白区域的垂直渐变效果，核心是通过locations配合多颜色节点来控制渐变的过渡范围，而不是只调整start/end（这两个参数仅控制渐变的拉伸范围，不改变颜色分段逻辑）。

问题根源 #

之前使用3个颜色节点+locations的方式，会导致白色区域仍处于渐变过渡阶段（从红到白再到红），无法形成纯色的中间区域，自然达不到“扩大白色区域”的视觉效果。

解决方案 #

通过添加重复的白色颜色节点，配合locations精准控制每个颜色的起止位置，让中间段保持纯色：

import React from 'react';
import { StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const ZoneRideCard = ({ zoneCardColor }) => {
  return (
    <LinearGradient
      // 颜色节点：红 → 白 → 白 → 红
      colors={[zoneCardColor, '#FFFFFF', '#FFFFFF', zoneCardColor]}
      // 垂直方向渐变（x居中，y从顶部到底部）
      start={{ x: 0.5, y: 0 }}
      end={{ x: 0.5, y: 1 }}
      // 颜色位置控制：
      // 0-0.1：红渐变到白；0.1-0.9：纯白；0.9-1：白渐变到红
      locations={[0, 0.1, 0.9, 1]}
      style={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 0,
    height: 140,
    width: 405,
    borderRadius: 10,
    alignItems: 'center',
    marginLeft: 25,
    marginTop: -45,
    marginBottom: 70,
  },
});

export default ZoneRideCard;

参数说明 #

• start/end：固定为垂直方向（x=0.5确保水平居中，y从0到1对应顶部到底部），避免渐变方向偏移。
• locations数组：每个值对应colors数组中颜色的停止位置，范围0-1。这里设置[0, 0.1, 0.9, 1]，让上下渐变过渡仅占各10%的高度，中间80%为纯白区域。
• 重复的白色节点：确保中间段没有颜色过渡，直接显示纯色白色。

如果需要调整白色区域的占比，只需修改locations中的中间两个值即可（比如改为[0, 0.05, 0.95, 1]，白色区域占比90%）。

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