效果图.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的操作
这样就能运行了。
