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改为
source={{uri:'file:///android_asset/tpl.html'}}
