React Native SVG柱状图：实现自定义渐变、顶部圆角及窄宽度

以下是修改后的完整代码，可实现你需要的效果：

import React from 'react'
import { BarChart, Grid } from 'react-native-svg-charts'
import { Defs, LinearGradient, Stop } from "react-native-svg";

class CustomBarChart extends React.PureComponent {
    render() {
        // 整理数据，统一使用全局样式
        const data = [50, 10, 40, 95, 85].map(value => ({ value }))

        const Gradient = () => (
            <Defs key={'barGradient'}>
                {/* 垂直方向渐变，匹配示例图的蓝紫渐变效果 */}
                <LinearGradient id={'barGradient'} x1={'0%'} y1={'0%'} x2={'0%'} y2={'100%'}>
                    <Stop offset={'0%'} stopColor={'#8B5CF6'} />
                    <Stop offset={'100%'} stopColor={'#6366F1'} />
                </LinearGradient>
            </Defs>
        )

        return (
            <BarChart
                style={{ height: 200 }}
                data={data}
                gridMin={0}
                // 全局柱子样式：顶部圆角+渐变填充
                svg={{
                    fill: 'url(#barGradient)',
                    rx: 4, // 圆角半径，可按需调整
                    ry: 4
                }}
                yAccessor={({ item }) => item.value}
                contentInset={{ top: 20, bottom: 20 }}
                barWidth={0.4} // 控制柱子宽度，值越小越窄（范围0-1）
            >
                <Grid />
                <Gradient />
            </BarChart>
        )
    }
}

export default CustomBarChart

关键修改说明 #

• 顶部圆角：在BarChart的svg属性中添加rx和ry，设置相同数值即可实现柱子的圆角效果，数值越大圆角越明显。
• 自定义渐变：把渐变方向改为垂直（x1="0%" y1="0%" x2="0%" y2="100%"），并替换颜色为示例图对应的蓝紫色系，确保渐变沿柱子垂直方向呈现；同时统一所有柱子使用该渐变，去掉原数据中单个柱子的独立样式，保持视觉统一。
• 缩小柱子宽度：添加barWidth属性，取值范围0-1，值越小柱子越窄，这里设置为0.4可根据布局需求微调。

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