在Expo React Native中使用Recharts出现渲染错误求助

问题场景 #

我尝试在 Expo React Native 应用中使用 Recharts 实现折线图，代码如下：

import {Line, LineChart, XAxis, YAxis} from "recharts";

export default function Profile() {

    const data = [
        { name: 'Jan', uv: 400, pv: 2400, amt: 2400 },
        { name: 'Feb', uv: 300, pv: 1398, amt: 2210 },
        { name: 'Mar', uv: 200, pv: 9800, amt: 2290 },

    ];

    return (
        <LineChart width={400} height={300} data={data} title={"Test"}>
            <XAxis dataKey="name" />
            <YAxis />
            <Line type="monotone" dataKey="uv" stroke="#8884d8" />
            <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
        </LineChart>
    );
}

出现的错误 #

错误1 #

ERROR Error: Text strings must be rendered within a <Text> component.
错误路径：in title (created by Surface) → in svg (created by Surface) → in Surface (created by LineChart) → in div (created by LineChart) → in LineChart (created by Profile) → in Profile

错误2 #

ERROR Invariant Violation: View config getter callback for component `circle` must be a function (received `undefined`). Make sure to start component names with a capital letter.
错误路径：in circle (created by Dot) → in Dot (created by Line) → in g → in Unknown (created by Line) → in g → in Unknown (created by Line) → in Line (created by Profile) → in svg (created by Surface) → in Surface (created by LineChart) → in div (created by LineChart) → in LineChart (created by Profile) → in Profile

当前项目依赖（package.json） #

{
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@miblanchard/react-native-slider": "^2.3.1",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@shopify/flash-list": "1.4.3",
    "@supabase/supabase-js": "^2.32.0",
    "expo": "^49.0.7",
    "expo-asset": "~8.10.1",
    "expo-constants": "~14.4.2",
    "expo-font": "~11.4.0",
    "expo-haptics": "~12.4.0",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-secure-store": "~12.3.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-countdown-circle-timer": "^3.2.1",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-slider": "^0.11.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-web": "~0.19.6",
    "recharts": "^2.9.0",
    "sentry-expo": "~7.0.0",
    "tailwindcss": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true,
  "name": "focuscoin",
  "version": "0.0.1"
}

已尝试的方案 #

试过 React Vis、Victory 等多款图表框架，均无法正常运行，猜测问题和 SVG 相关，但不确定具体原因。

解决方案 #

问题根源 #

Recharts、React Vis 这类库是为React Web设计的，直接在 React Native 中使用会出现兼容性问题：

1. React Native 要求所有文本必须包裹在 <Text> 组件中，而 Web 图表库直接渲染文本，触发第一个错误；
2. Web 图表库使用原生 SVG 标签（如 <circle>），但 React Native 中需要使用 react-native-svg 提供的首字母大写组件（如 <Circle>），导致第二个错误。

正确做法：使用 React Native 适配的图表库 #

推荐使用专门为 React Native 开发的图表库，同时确保安装 react-native-svg 依赖（大多数 Native 图表库都依赖它）。

方案1：使用 Victory Native

1. 移除 Web 版 Recharts：

npm uninstall recharts
# 或 yarn remove recharts

2. 安装依赖：

npx expo install victory-native react-native-svg

3. 修改代码示例：

import React from 'react';
import { View } from 'react-native';
import { VictoryLine, VictoryChart, VictoryAxis } from 'victory-native';

export default function Profile() {
  const data = [
    { name: 'Jan', uv: 400, pv: 2400, amt: 2400 },
    { name: 'Feb', uv: 300, pv: 1398, amt: 2210 },
    { name: 'Mar', uv: 200, pv: 9800, amt: 2290 },
  ];

  return (
    <View style={{ width: 400, height: 300 }}>
      <VictoryChart>
        <VictoryAxis dependentAxis />
        <VictoryAxis tickValues={['Jan', 'Feb', 'Mar']} />
        <VictoryLine data={data} x="name" y="uv" style={{ data: { stroke: "#8884d8" } }} />
        <VictoryLine data={data} x="name" y="pv" style={{ data: { stroke: "#82ca9d" } }} />
      </VictoryChart>
    </View>
  );
}

方案2：使用 React Native Chart Kit

1. 安装依赖：

npx expo install react-native-chart-kit react-native-svg

2. 修改代码示例：

import React from 'react';
import { View } from 'react-native';
import { LineChart } from 'react-native-chart-kit';

export default function Profile() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [
      {
        data: [400, 300, 200],
        color: (opacity = 1) => `rgba(136, 132, 216, ${opacity})`,
      },
      {
        data: [2400, 1398, 9800],
        color: (opacity = 1) => `rgba(130, 202, 157, ${opacity})`,
      },
    ],
  };

  return (
    <View>
      <LineChart
        data={data}
        width={400}
        height={300}
        chartConfig={{
          backgroundColor: '#ffffff',
          backgroundGradientFrom: '#ffffff',
          backgroundGradientTo: '#ffffff',
          decimalPlaces: 0,
          color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          style: { borderRadius: 16 },
          propsForDots: { r: '4', strokeWidth: '2', stroke: '#ffa726' },
        }}
        bezier
      />
    </View>
  );
}

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