React Native集成react-apexcharts时出现ReferenceError: SVG未找到

问题原因 #

react-apexcharts是为Web环境开发的图表库，依赖浏览器原生的SVG全局对象，但React Native没有内置该环境，直接使用会触发此错误，需改用专门适配React Native的图表库。

解决方案步骤 #

• 卸载不兼容的Web版依赖
  先移除原有的web版apexcharts相关包：

  npm uninstall apexcharts react-apexcharts
  # 使用yarn则执行：yarn remove apexcharts react-apexcharts
  

• 安装React Native适配版本
  安装基于react-native-svg实现的适配库：

  npm install react-native-svg-apexcharts react-native-svg
  # 使用yarn则执行：yarn add react-native-svg-apexcharts react-native-svg
  

  React Native 0.60+版本会自动完成react-native-svg的链接，无需手动操作。

• 修改组件代码
  将组件中的导入语句替换为适配库：

  // 替换前
  // import ReactApexChart from 'react-apexcharts';
  // 替换后
  import ReactApexChart from 'react-native-svg-apexcharts';
  

  原有图表配置（如chartOptions、series）可直接复用，注意避免使用Web环境特有的配置项。

• 清除缓存并重启项目
  执行命令清除缓存后重新运行项目：

  npm run android --reset-cache
  

验证效果 #

重新编译运行项目后，图表即可正常渲染，不再出现SVG变量未找到的错误。

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