开发平台：mac pro
node版本：v8.11.2
npm版本：6.4.1
react-native版本：0.57.8
native-echarts版本：^0.5.0目标平台：android端收银机，android7.0+
最近在使用react native进行app的开发工作，rn开发的内容会与原生app混合，在一些使用场景下遇到了一些问题
使用场景：每日收益与每月收益的折线图统计
在pc/h5端的开发工作中，图标类的开发使用echarts/f2等三方工具都是比较常见的了，在react native中，没有了DOM的概念，因此在react native中使用了一些三方的图标库
native-echarts，github地址。
需要更换echarts版本的方法
native-echarts内部使用了react native中的webview进行图表的展示，本质上只是传入数据，通过echarts渲染出静态的HTML文档，然后通过webview展示出来而已。
netive-echarts内部使用的echarts版本为v3.2.3″版本，如果需要更高级的echarts版本，只需要更换src/components/Echarts/echarts.min.js文件以及tpl.html文件里的内容即可。
使用时遇到的问题: 在debug模式下，真机以及测试机器上图标正常显示，打包成android的apk文件后图表都不显示
解决方式：
1：找到native-echarts/src/components/Echarts/tpl.html文件，复制到android/app/src/main/assets这个目录下面，如果文件夹不存在就新建一个即可。
2：找到文件native-echarts/src/components/Echarts/index.js，修改为一下内容
import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min'; export default class App extends Component { constructor(props) {
super(props);
} // 预防过渡渲染
shouldComponentUpdate(nextProps, nextState) {
const thisProps = this.props || {}
nextProps = nextProps || {}
if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
return true
}
for (const key in nextProps) {
if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
// console.log('props', key, thisProps[key], nextProps[key])
return true
}
}
return false
} componentWillReceiveProps(nextProps) {
if (nextProps.option !== this.props.option) {
// 解决数据改变时页面闪烁的问题
this.refs.chart.injectJavaScript(renderChart(nextProps))
}
} 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={{uri: 'file:///android_asset/tpl.html'}}
onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
/>
</View>
);
}
}
可能存在的问题？？？？
同时，在后续的react native版本中，webview即将从react native内部移除出去，改为三方包安装使用。参考：
https://reactnative.cn/docs/webview/#mixedcontentmode
https://github.com/react-native-community/discussions-and-proposals/issues/6
因此，在后续新版本中使用native-echarts，可能会使用不了，因此建议fork一个稳定的版本到自己的github上，或者在后续自己采用react-native-webview + echarts的方式自由的组合版本，使用起来更加自由。
参考文档：
https://github.com/somonus/react-native-echarts/issues/47
https://github.com/somonus/react-native-echarts/issues/32
https://github.com/somonus/react-native-echarts/issues/122
<!–
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff}
span.s1 {font-variant-ligatures: no-common-ligatures}
–>
<!–
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff}
span.s1 {font-variant-ligatures: no-common-ligatures}
–>
