React Native Expo项目引入react-apexchart报SVG不存在错误的解决方案咨询

错误原因 #

react-apexcharts是为Web浏览器环境开发的图表库，依赖浏览器原生的SVG DOM API。React Native原生端（iOS/Android）没有DOM环境，直接导入使用就会触发ReferenceError: Property 'SVG' doesn't exist错误。

可行解决方案 #

1. 平台区分加载（Web用react-apexcharts，原生用其他库） #

利用React Native的平台判断机制，Web端正常使用react-apexcharts，原生端用你已安装的react-native-chart-kit替代：

import { Platform } from 'react-native';

export default function Chart() {
  if (Platform.OS === 'web') {
    const ApexChart = require('react-apexcharts').default;
    const options = {
      xaxis: { categories: ['Jan', 'Feb', 'Mar'] }
    };
    const series = [{ name: 'Sales', data: [30, 40, 35] }];
    
    return <ApexChart options={options} series={series} type="line" height={350} />;
  } else {
    const { LineChart } = require('react-native-chart-kit');
    const chartData = {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{ data: [30, 40, 35] }]
    };
    const chartConfig = {
      backgroundColor: '#ffffff',
      decimalPlaces: 0,
      color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
    };
    
    return <LineChart data={chartData} width={300} height={350} chartConfig={chartConfig} />;
  }
}

2. 原生端用WebView包裹ApexCharts #

如果必须在原生端使用ApexCharts，可通过WebView加载Web版的ApexCharts：

• 第一步：安装依赖

npx expo install react-native-webview

• 第二步：创建本地HTML文件（chart.html）

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.43.0"></script>
  <style> body { margin: 0; } </style>
</head>
<body>
  <div id="chart" style="width:100%;height:350px;"></div>
  <script>
    const chartOptions = {
      chart: { type: 'line' },
      xaxis: { categories: ['Jan', 'Feb', 'Mar'] }
    };
    const chartSeries = [{ name: 'Sales', data: [30, 40, 35] }];
    new ApexCharts(document.getElementById('chart'), chartOptions, chartSeries).render();
  </script>
</body>
</html>

• 第三步：在React Native组件中加载该HTML

import { WebView } from 'react-native-webview';
import { useState, useEffect } from 'react';
import { readFile } from 'expo-file-system';

export default function ApexChartNative() {
  const [html, setHtml] = useState('');

  useEffect(() => {
    const loadChartHtml = async () => {
      const content = await readFile(require('./chart.html'));
      setHtml(content);
    };
    loadChartHtml();
  }, []);

  return <WebView source={{ html }} style={{ height: 350, width: '100%' }} />;
}

3. 使用React Native原生图表库（推荐） #

放弃react-apexcharts，直接用专为React Native设计的图表库，比如你已安装的react-native-chart-kit，或是victory-native、react-native-svg-charts——这些库基于react-native-svg开发，完全适配原生环境，不需要依赖Web DOM。

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