我爱模板网在使用react-native开发项目，需要显示chart图表，用了native-echarts，遇到了很大的坑，弄了半天才弄好，这里详细记录下：
1、安装
1 | npm install native-echarts --S |
1 | import Echarts from 'native-echarts’ |
3、使用
01 | const [chartOption, setChartOption] = useState({}); |
13 | data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] |
19 | data: [5, 20, 36, 10, 10, 20] |
28 | <Button onPress={() => {showChart()}}>显示chart</Button> |
29 | <Echarts option={chartOption} height={300} /> |
此时：做完上面，不行，直接报错：
WebView has been removed from React Native.
这是因为native-echart里面的WebView还是从React Native引用的，而，新版已经将WebView从React Native剥离出来了，需要单独引入
4、安装react-native-webview，修改chart引用
①、安装react-native-webview
1 | npm install react-native-webview -S |
将
1 | import { WebView, View, StyleSheet, Platform } from 'react-native'; |
改为
1 | import { View, StyleSheet, Platform } from 'react-native'; |
2 | import { WebView } from 'react-native-webview'; |
完成这一步，只是解决了报错问题，但是再看刚才的图表，发现不显示或者显示一段html代码，并没有渲染。
5、解决渲染问题
①、复制文件tpl.html（路径： node_modules\native-echarts\src\components\Echarts）至android\app\src\main\assets目录下，没有assets文件夹，则自己创建
②、编辑index.js文件
路径：node_modules\native-echarts\src\components\Echarts
将
1 | source={require('./tpl.html')} |
修改为
同时, 修改
1 | import { View, StyleSheet } from 'react-native'; |
为
1 | import { View, StyleSheet, Platform } from 'react-native'; |
在执行完react-native bundle命令后，需要手动将资源文件res/drawable-mdpi中生成的tpl.html文件删除，再执行
1 | cd android && ./gradlew assembleRelease |
命令，这样就能成功打包了。
6、React Native Echarts放大缩小问题解决方案：
将node_modules\native-echarts\src\components\Echarts\index.js文件中
修改为
1 | scalesPageToFit={Platform.OS !== 'ios'} |
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
