react-native中echats的使用方法

这个文章真的呕心沥血，我只能对echats官方说，草，太傻逼了。rn官方的webview 组件变动了位置，echats官方并没有及时更新，所以频频报错。

我试了官方的echats，还有echats pro，还有sechats，但是最初都没有安装成功。

我的版本：2021年2月亲测ok

"native-echarts": "^0.5.0",
"react": "16.13.1",
"react-native": "0.63.4",

官方地址自己找，关键字是echarts.apache。我看了各种github的Issues，stackoverflow，百度谷歌满地找，各种解决方案，终于找到正确的操作。

1.安装环境
npm install native-echarts --save 
npm i react-native-webview
react-native link react-native-webview //佛祖保佑，最后一个有老外说0.6以上的rn无需这一步骤，但是我还是使用了。
2.新建文件夹并复制tpl.html文件 这个文件夹是没有的，需要自己新建！
复制node_modules\native-echarts\src\components\Echarts\tpl.html文件、到android/app/src/main/assets文件夹下。
3.webview 会出现在第二行，把这个webview删了， 从第二行删掉，写到最后一行，并且from 更改为react-native-webview

4.还在这个文件index.js里面

添加
const iosPlatform = Platform.OS === 'ios' ? 'true' : 'false';
//搜索关键词source，更改里面的内容
source={iosPlatform === 'true' ? require('./tpl.html') : {uri: 'file:///android_asset/tpl.html'}}

如果你懒得改，直接复制我的

import React, { Component } from 'react';
import {  View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';
import WebView from 'react-native-webview';

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

export default class App extends Component {

  constructor(props) {
    super(props);
    this.setNewOption = this.setNewOption.bind(this);
  }
  

  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  setNewOption(option) {
    this.refs.chart.postMessage(JSON.stringify(option));
  }

  render() {
    return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={Platform.OS !== 'ios'}
          originWhitelist={['*']}
          source={iosPlatform === 'true' ? require('./tpl.html') : {uri: 'file:///android_asset/tpl.html'}}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}

最后一步：

找一个demo，官方的demo，复制粘贴进去，跑起来就行。