【React Native】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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值