react-native-svg-charts条形图自定义颜色、点击事件及插入SVG报错如何解决

问题根因 #

• 你当前使用的react-native-svg@12.1.0和react-native-svg-charts@5.4.0版本不兼容：react-native-svg-charts@5.x最高适配react-native-svg@9.x，高版本会导致内置组件（比如Tooltip）报错、自定义属性不生效。
• BarChart默认不会读取数据项里的svg.fill配置，必须通过自定义<Bar>子组件手动绑定样式和事件。

解决方案 #

第一步：处理版本兼容（二选一即可） #

• 方案1：降级react-native-svg到9.x版本，执行命令：npm i react-native-svg@9.13.6，之后iOS端重新执行pod install即可
• 方案2：如果不想降级，弃用内置Tooltip组件，自行实现悬浮提示逻辑，可避免兼容报错。

第二步：实现自定义柱色+点击改色逻辑 #

修改代码如下：

import { BarChart, Bar } from 'react-native-svg-charts';
import { useState } from 'react';

// 定义状态存储当前选中的柱条索引
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);

const getFill = (index: number) => {
    // 优先渲染选中态颜色，可自行调整
    if (index === selectedIndex) return "orange";
    if (index > 30) return "purple";
    if (index > 20) return "blue";
    if (index > 10) return "green";
    return "red";
};

// 数据结构可以简化，不需要提前存svg属性
const barData = dataList.map((value, index) => ({
    value,
    key: `bar-${index}`
}));

return (
    <BarChart
        style={{ flex: 9, width: apx(750) }}
        spacingInner={0.2}
        data={barData}
        gridMin={Y_AXIS_MIN}
        gridMax={Y_AXIS_MAX}
        animate
    >
        {/* 自定义Bar组件绑定样式和点击事件 */}
        <Bar 
            onPress={(event, dataItem, index) => setSelectedIndex(index)}
            svg={(data, index) => ({
                fill: getFill(index)
            })}
        />
        {/* 若已经降级react-native-svg，可在此处正常插入Tooltip */}
        {/* {barData.map((_, i) => (
            <Tooltip index={i} />
        ))} */}
    </BarChart>
);

额外说明 #

如果需要插入其他自定义SVG元素，可直接作为BarChart的子组件传入，所有子组件都会自动接收图表的x、y坐标、宽高相关参数，可直接用于自定义元素定位。

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