ReactNative实现文本渐变

我们直接上图，可以看到上面文本的效果，使用SVG实现

1.首先还是要引入react-native-svg库

2.使用该库下面的LinearGradient和Text

好，话不多说，我们看具体代码

      <Svg width={422} height={30} viewBox={'0 0 422 30'}>
          <Defs>
            <LinearGradient
              id="Gradient"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2={constNumberStyle[422]}
              y2="0">
              <Stop offset="0" stopColor={'rgba(49,122,247,1)'} />
              <Stop offset="1" stopColor={'rgba(255,123,76,1)'} />
            </LinearGradient>
            <Text
              id="Text"
              x={211}
              y={24}
              dominant-baseline="middle"
              fontSize={28}
              textAnchor="middle">
              文字是渐变色
            </Text>
          </Defs>
          <Use href="#Text" fill="url(#Gradient)" />
        </Svg>