ChargEco/Strides-APP/app/components/VbeLinearGradient.js

import React from 'react';
import Svg, {
  Defs,
  LinearGradient,
  Rect,
  Stop,
} from 'react-native-svg';

/**
 * 线性渐变色组件
 * @param {*} x1表示渲染起始位置的x坐标，y1表示渲染起始位置的y坐标，x2表示渲染结束位置的x坐标，y2表示渲染结束位置的y坐标，colorList表示渲染的颜色，它是一个颜色数组，数组长度必须大于等于2
 * @returns VbeLinearGradient
 */
const VbeLinearGradient = ({ colorList=[], x1=0, y1=0, x2=50, y2=50 }) => (
  <Svg height="100%" width="100%">
    <Defs>
      <LinearGradient
        id="lgrad"
        x1={x1+"%"}
        y1={y1+"%"}
        x2={x2+"%"}
        y2={y2+"%"}>
        {colorList.map((value, index) => (
          <Stop
            key={`LinerGradientItem_${index}`}
            offset={value.offset}
            stopColor={value.color}
            stopOpacity={value.opacity}
          />
        ))}
      </LinearGradient>
    </Defs>
    <Rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
  </Svg>
);

export default VbeLinearGradient;