安装该包进行测试，工程一直报错 #260
Description
zhangxingchao@zhangxingchaodeMacBook-Pro android % npx react-native log-android
info Starting logkitty
[11:45:23] I | ReactNativeJS ▶︎ Running "RNEchartKline" with {"rootTag":1,"initialProps":{},"fabric":true}
[11:45:25] E | ReactNativeJS ▶︎ [TypeError: Cannot read property '__extends' of undefined]
[11:45:25] E | ReactNativeJS ▶︎ { [TypeError: Cannot read property 'brush' of undefined]
│ componentStack: '\n at EchartsDemo (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:98915:38)\n at RCTView ()\n at View_withRef (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:5590:75)\n at AppContent ()\n at RNCSafeAreaProvider ()\n at SafeAreaProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:131086:24)\n at App (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:98866:54)\n at RCTView ()\n at View_withRef (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:5590:75)\n at RCTView ()\n at View_withRef (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:5590:75)\n at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:51893:25)\n at RNEchartKline(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:68857:28)',
└ isComponentError: true }
[11:45:25] E | ReactNativeJS ▶︎ [TypeError: Cannot read property 'brush' of undefined]
[11:45:25] E | ReactNativeJS ▶︎ [TypeError: Cannot read property '__extends' of undefined]
这是我的源码：
App.tsx：
/**
- Sample React Native App
- https://github.com/facebook/react-native
- @Format
*/
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import EchartsDemo from './src/EchartsDemo';
function App() {
const isDarkMode = useColorScheme() === 'dark';
return (
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
);
}
function AppContent() {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
EchartsDemo.tsx：
import React, { useEffect, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
// Import SVG-only entry to avoid requiring Skia package
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
// Use the prebuilt ECharts bundle to avoid tslib ESM issues in Metro
// eslint-disable-next-line @typescript-eslint/no-var-requires
const echarts = require('echarts/dist/echarts');
// Register SVG renderer with the bundled build
echarts.use([SVGRenderer]);
const WIDTH = 360; // Adjust as needed or compute from layout
const HEIGHT = 260;
const EchartsDemo: React.FC = () => {
const chartRef = useRef(null);
useEffect(() => {
let chart: any;
if (chartRef.current) {
// @ts-ignore - RN target, width/height provided explicitly
chart = echarts.init(chartRef.current, 'light', {
renderer: 'svg',
width: WIDTH,
height: HEIGHT,
});
const option = {
title: { text: 'ECharts Line Demo' },
tooltip: { trigger: 'axis' },
legend: { data: ['Series A'] },
grid: { left: 32, right: 16, top: 48, bottom: 32 },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
name: 'Series A',
type: 'line',
smooth: true,
data: [120, 200, 150, 80, 70, 110, 130],
areaStyle: {},
},
],
} as any;
chart.setOption(option);
}
return () => chart?.dispose?.();
}, []);
return (
);
};
const styles = StyleSheet.create({
container: {
width: WIDTH,
height: HEIGHT,
alignSelf: 'center',
marginTop: 24,
},
});
export default EchartsDemo;