react-native - 将垂直线性渐变应用于 svg 线和圆

Question

我尝试根据文档使用 react-native-svg 创建一个带有垂直线性渐变的 SVG 圆圈。这是代码的样子：

<View style={style}>
   <Svg height={boxHeight} width={boxWidth}>
        <Defs>
            <LinearGradient
                id="grad"
                x1={boxWidth / 2}
                y1="0"
                x2={boxWidth / 2}
                y2={boxHeight}>
                <Stop
                    offset="0%"
                    stopColor={theme['color-primary-400']}
                />
                <Stop
                    offset="100%"
                    stopColor={theme['color-info-400']}
                />
            </LinearGradient>
        </Defs>
        <Circle cx={boxWidth / 2} cy={boxHeight / 2} r="15" fill="url(#grad)" />
    </Svg>
</View>

我的目标是圆上的渐变是垂直的，从“#F3455F”到“#4A75D5”（颜色在主题文件中定义并用作变量）。BoxWidth 等于 '30'，而 boxHeight 是 '70'。

但是，圆圈​​呈现为实心“#F3455F”彩色图形。

我如何定义渐变有什么问题？

Answer 1

我找到了方法。渐变的坐标应该是：

x1='0%'
y1='0%'
x2='0%'
y2='100%'

如果您在 LinearGradient 道具中设置这些，则可以正常工作。