0.81.4开启新架构React Native CLI方式依赖后使用报错

[mistletoe5215]

#报错如下：

#调用代码：

import { useEffect, useRef } from 'react';
import { Dimensions } from 'react-native';
import {
  SVGRenderer,
  SkiaRenderer,
  SkiaChart,
} from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import type { EChartsOption } from 'echarts';
import type { ChartElement } from '@wuba/react-native-echarts';
import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components';
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  SVGRenderer,
  SkiaRenderer,
  BarChart,
  LineChart,
]);

const E_HEIGHT = 250;
const E_WIDTH = Dimensions.get('screen').width;

function SkiaComponent({ option }: { option: EChartsOption }) {
  const skiaRef = useRef<(ChartElement & any) | null>(null);

  useEffect(() => {
    let chart: echarts.EChartsType | undefined;
    if (skiaRef.current) {
      chart = echarts.init(skiaRef.current, 'light', {
        // @ts-ignore
        renderer: 'skia',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, [option]);

  return <SkiaChart ref={skiaRef} />;
}
export default SkiaComponent;
//使用：
import { Platform, StyleSheet, View } from 'react-native';
import React from 'react';
import { EChartsOption } from 'echarts';
import SkiaComponent from '../components/SkiaComponent.tsx';
const fontFamily = Platform.select({
  ios: 'PingFang SC',
  android: 'sans-serif',
});
const option = {
  xAxis: {
    type: 'category' as const,
    data: ['周一', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value' as const,
  },
  tooltip: {
    trigger: 'axis' as const,
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar' as const,
    },
    {
      data: [220, 100, 180, 160, 150, 120, 110],
      type: 'line' as const,
    },
  ],
  textStyle: {
    fontFamily,
  },
} as EChartsOption;
function GameScreen() {
  return <View style={styles.container}>
    <SkiaComponent option={option}/>
  </View>;
}
export default GameScreen
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: 24,
  }
});
App.tsx:

  <Tab.Screen
        name={ROUTES.GAMES}
        component={GameScreen}
        options={{ title: 'Game' }}
      />

#新增的依赖如下：
package.json：

   "@wuba/react-native-echarts": "3.0.1",
    "@shopify/react-native-skia": "2.2.12",
    "echarts": "^6.0.0",
    "react-native-reanimated": "~4.1.0",
    "react-native-worklets": "^0.5.1",
    "zrender": "^6.0.0"`

[zhiqingchen]

#239

参考