1、安装
npm install native-echarts --S2、引入
import Echarts from 'native-echarts’3、使用
const [chartOption, setChartOption] = useState({}); showChart = () => { setChartOption({ title: { text: 'K线图' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) setTimeout(()=>{ showModel(true) },500) } //点击按钮 <Button onPress={() => {showChart()}}>显示chart</Button> <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
npm install react-native-webview -S②、进入node_modules\native-echarts\src\components\Echarts,找到index.js
将
import { WebView, View, StyleSheet, Platform } from 'react-native';改为
import { View, StyleSheet, Platform } from 'react-native'; 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
将
source={require('./tpl.html')}修改为
source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}同时, 修改
import { View, StyleSheet } from 'react-native';为
import { View, StyleSheet, Platform } from 'react-native';在执行完react-native bundle命令后,需要手动将资源文件res/drawable-mdpi中生成的tpl.html文件删除,再执行
cd android && ./gradlew assembleRelease命令,这样就能成功打包了。
6、React Native Echarts放大缩小问题解决方案:
将node_modules\native-echarts\src\components\Echarts\index.js文件中
scalesPageToFit={false}修改为
scalesPageToFit={Platform.OS !== 'ios'}7、重新运行 yarn android