React Native使用Victory图表组件出现Component Exception错误如何解决

核心原因 #

你使用了Web端适配的victory库，React Native环境下无法直接渲染Web SVG元素，触发组件异常。

分步修复操作 #

• 替换正确依赖
  先卸载错误依赖，安装React Native适配版本的Victory及必要渲染依赖：

  npm uninstall victory
  npm install victory-native react-native-svg
  # iOS环境额外执行原生依赖安装
  cd ios && pod install && cd ..
  

• 修正Graph组件代码
  调整组件引入来源，补充测试数据和容器宽高（Victory组件需要明确的父容器尺寸才能正常计算渲染范围）：

  import React from 'react';
  import { View } from 'react-native';
  // 从victory-native引入组件，而非victory
  import { VictoryLine } from 'victory-native';
  
  export default function Graph() {
    // 测试用示例数据，后续可替换为你的实际预算数据
    const lineData = [
      {x: '1月', y: 300},
      {x: '2月', y: 450},
      {x: '3月', y: 320},
      {x: '4月', y: 580},
      {x: '5月', y: 490}
    ]
    return (
      <View style={{width: '100%', height: 120, marginTop: 10}}>
        <VictoryLine data={lineData} />
      </View>
    )
  }
  

• 检查组件引入路径
  确认你的Graph组件文件名是否为Line.js/Line.tsx，如果文件名是Graph.js，需要将业务页面中的引入语句修改为：

  import Graph from './Graph'
  

完成以上操作后重新运行项目即可正常渲染折线图。

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