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

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

前言：

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

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

安装：

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

npm install native-echarts --save

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

问题描述：

在开发过程中，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