React Native 使用百度 Echarts 图表之 Android 端打包后图表不显示的解决办法

时间:2024-04-05 15:24:18

参考资料:React Native使用百度Echarts显示图表

前言:

1.Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。

2.Echarts组件是兼容IOS和安卓双平台的。

安装:

在React Native项目中安装native-echarts组件,代码如下所示:

npm install native-echarts --save

安装完成之后,在node_modules文件夹下会多出一个文件夹叫native-echarts,目录结构如下图所示:

React Native 使用百度 Echarts 图表之 Android 端打包后图表不显示的解决办法

问题描述:

在开发过程中,Echarts图表是可以正常显示的。但是在打包时,IOS可以正常打包并显示,Android端打包时却会出错。

解决办法:

1.首先,将 index.js 中的代码:

source={require('./tpl.html')}

修改为:

source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}

2.同时,将 tpl.html 文件拷贝到安卓项目下面的 app/src/main/assets 文件夹中。

3.最后,在执行完 react-native bundle 命令后,需要手动将资源文件 app/src/main/res 中生成的 tpl.html 文件删除,再运行程序。react-native bundle 命令,如下所示:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

这样就能成功打包了。

END