从Victory Native迁移至Victory Native XL遇Render Error问题求助

错误原因分析 #

这个错误大多是组件导入路径错误或依赖版本不兼容导致的，结合你的代码和Victory Native XL的特性，主要排查以下几点：

解决方案 #

1. 修正组件导入路径 #

Victory Native XL的官方包名是@shopify/victory-native，而非旧版的victory-native，你当前的导入路径错误，导致无法正确加载核心组件：

// 错误导入
import { CartesianChart, Line, useChartPressState } from "victory-native";

// 修正为
import { CartesianChart, Line, useChartPressState } from "@shopify/victory-native";

2. 确保依赖版本兼容 #

Victory Native XL依赖特定版本的Skia和Reanimated，执行以下命令安装匹配的依赖：

npm install @shopify/victory-native @shopify/react-native-skia react-native-reanimated@~3.3.0

或使用yarn：

yarn add @shopify/victory-native @shopify/react-native-skia react-native-reanimated@~3.3.0

3. 处理字体加载的边界情况 #

useFont可能返回null，需要在字体加载完成前避免渲染图表，防止因字体未就绪导致的渲染异常：

function MyChart() {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  // 字体未加载时返回占位容器
  if (!font) return <View style={{ height: 300 }} />;

  return (
    <View style={{ height: 300 }}>
      {/* 原有图表代码 */}
    </View>
  );
}

4. 验证项目配置 #

• 确保react-native-reanimated的babel插件已添加到babel.config.js：

module.exports = {
  plugins: ['react-native-reanimated/plugin'],
};

• 重启Metro服务并清除缓存：

npx react-native start --reset-cache

修正后的完整代码 #

import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "@shopify/victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
import inter from "../../assets/inter-medium.ttf";

function MyChart() {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  if (!font) return <View style={{ height: 300 }} />;

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        axisOptions={{
          font,
        }}
        chartPressState={state}
      >
        {({ points }) => (
          <>
            <Line points={points.highTmp} color="red" strokeWidth={3} />
            {isActive && (
              <ToolTip x={state.x.position} y={state.y.highTmp.position} />
            )}
          </>
        )}
      </CartesianChart>
    </View>
  );
}

function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
  return <Circle cx={x} cy={y} r={8} color="black" />;
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));

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