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改为

       source={{uri:'file:///android_asset/tpl.html'}}