React-native 安装echarts

效果图.png

以上就是集成完成的效果图。在没成功之前，集成就展示了一些莫名的html代码、

1.问题解决，参考文章

问题：

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，复制他到android的asserts

image.png

步骤5（复制即可）

更改node_modules\native-echarts\src\components\Echarts下index.js文件代码
（修改的内容有注释新增）

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>
    );
  }
}

注意：运行android时提示FileProvider找不到问题，

把androidx等修改成
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,重新进行 npm install 的话，就需要重新进行步骤3，步骤5的操作
这样就能运行了。