效果圖.png

以上就是集成完成的效果圖。在沒(méi)成功之前，集成就展示了一些莫名的html代碼、

1.問(wèn)題解決，參考文章

問(wèn)題：

image.png

參考文章感謝小伙伴
github鏈接地址 native-charts

集成步驟1：

安裝npm install native-echarts --save 或者 yarn add native-echarts

步驟2：

yarn add react-native-webview
react-native link react-native-webview
新版本需要react-native-webview，所以要添加他并link一下。

步驟3：

在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";

步驟4：

image.png

在node_modules\native-echarts\src\components\Echarts找到tpl.html，復(fù)制他到android的asserts

image.png

步驟5（復(fù)制即可）

更改node_modules\native-echarts\src\components\Echarts下index.js文件代碼
（修改的內(nèi)容有注釋新增）

image.png

import React, { Component } from 'react';
import {  View, StyleSheet, Platform } from 'react-native';
import  {WebView} from "react-native-webview";
import renderChart from './renderChart';
import echarts from './echarts.min';
//以下為新增
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有新增
          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>
    );
  }
}

注意：運(yùn)行android時(shí)提示FileProvider找不到問(wèn)題，

把a(bǔ)ndroidx等修改成
import android.support.v4.content.FileProvider;
其他地方的一些修改
import android.support.annotation.RequiresApi;
import android.support.v4.content.ContextCompat;
import android.support.v4.content.FileProvider;

另外：如果刪除了node_modules,重新進(jìn)行 npm install 的話，就需要重新進(jìn)行步驟3，步驟5的操作
這樣就能運(yùn)行了。