react native 使用Echart

首先安装Echarts的native包

命令:npm install native-echarts --save

然后网上随便搜了搜找了个简单的例子 如下:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Echarts from 'native-echarts'; //引用

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

    render() {
        const option = {
            title: {
                text: 'ECharts demo'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        return (
            <View style={{flex: 1, height: this.props.height, width: this.props.width}}>
                <Echarts option={option} height={300}/>
            </View>
        );
    }
}

但是运行以后手机上什么都没有,并且有警告.
警告是这样的
WebView has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from 'react-native-webview' instead of 'react-native'.

图片.png

意思是webwiew要废了.不用了.

于是安装他们推荐的,用下面的命令
yarn add react-native-webview
react-native link react-native-webview
还要改掉native-echarts里面
node_modules\native-echarts\src\index.js和
node_modules\native-echarts\src\components\Echarts\index.js
里的引用.
import { WebView,View } from 'react-native';
这里的 WebView 去掉.添加下面的
import { WebView } from "react-native-webview";

图片.png

这样 警告就没有了.

然后界面还是什么都没有显示.
这时候需要这样

1.在node_modules\native-echarts\src\components\Echarts找到tpl.html 这个文件路径 图片.png
2.将tpl.html拷贝这个文件到android的assets这个目录下,没有这个目录就新建一个
图片.png
3.更改node_modules\native-echarts\src\components\Echarts下index.js文件代码 图片.png

代码贴出来

const isoPlatform = Platform.OS === 'ios' ?'true' : 'false';

 source={isoPlatform ==='true' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}

参考链接
https://www.jianshu.com/p/4ad02ecf3d1a
https://cloud.tencent.com/developer/article/1374925
https://blog.csdn.net/hunannanhu/article/details/79648988