react-native|react-native native-echarts 趴坑指南
react-native 日常踩坑 下面我们探讨下native-echarts经常会踩到的坑
1、ios release运行不显示图表，一片空白
在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）。注意如果是载入html代码，则需要设置originWhitelist，比如可以设为["*"]来允许运行本地代码。
打开node_modules\native-echarts\src\components\Echarts\index.js文件,并在WebView加上originWhitelist={['*']}即可修复
2、演示出现了滚动条，并且拖动时就会出现空白,双击会缩小问题
打开node_modules\native-echarts\src\components\Echarts\index.js文件，修改WebView的scalesPageToFit={true}
3、解决频繁刷新问题
打开node_modules\native-echarts\src\components\Echarts\index.js文件
shouldComponentUpdate(nextProps, nextState) {
const thisProps = this.props || {}
nextProps = nextProps || {}
if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
return true
}
for (const key in nextProps) {
if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
// console.log('props', key, thisProps[key], nextProps[key])
return true
}
}
return false
}
componentWillReceiveProps(nextProps) {
if(nextProps.option !== this.props.option) {
// 解决数据改变时页面闪烁的问题
this.refs.chart.injectJavaScript(renderChart(nextProps,false))
}
}
4、android 打包后，所有的图表显示不出来
1./node_modules/native-echarts/src/components/Echarts/ 目录下的tpl.html 拷贝一份
2./android／app/src/main 创建 assets文件夹
3.把第一步拷贝的文件放到第二步创建的assets文件夹下
4.进入Echarts文件(/node_modules/native-echarts/src/components/Echarts/index) 把WebView的source改为
【react-native|react-native native-echarts 趴坑指南】source={{uri:'file:///android_asset/tpl.html'}}
推荐阅读
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
- react-native中Text包含Image大小问题
- React-Native开发工具|React-Native开发工具 -- Vs Code
- react-native 打包apk步骤
- react-native|react-native 获取百度地图sha1
- react|react-native支付宝，微信支付对接接口
- 使用react-native仿写一个qq音乐播放
- react-native|react-native redux 与 react-redux 的基本使用
- React-native 开发小技巧
- react-native|react-native 安卓真机调试报错Could not expand ZIP