開發(fā)平臺：mac pro

node版本：v8.11.2

npm版本：6.4.1

react-native版本：0.57.8

native-echarts版本：^0.5.0

目標(biāo)平臺：android端收銀機，android7.0+

最近在使用react native進行app的開發(fā)工作，rn開發(fā)的內(nèi)容會與原生app混合，在一些使用場景下遇到了一些問題

使用場景：每日收益與每月收益的折線圖統(tǒng)計

在pc/h5端的開發(fā)工作中，圖標(biāo)類的開發(fā)使用echarts/f2等三方工具都是比較常見的了，在react native中，沒有了DOM的概念，因此在react native中使用了一些三方的圖標(biāo)庫

native-echarts，github地址。

需要更換echarts版本的方法

native-echarts內(nèi)部使用了react native中的webview進行圖表的展示，本質(zhì)上只是傳入數(shù)據(jù)，通過echarts渲染出靜態(tài)的HTML文檔，然后通過webview展示出來而已。

netive-echarts內(nèi)部使用的echarts版本為v3.2.3"版本，如果需要更高級的echarts版本，只需要更換echarts.min.js文件以及tpl.html文件里的內(nèi)容即可。

使用時遇到的問題:在debug模式下，真機以及測試機器上圖標(biāo)正常顯示，打包成android的apk文件后圖表都不顯示

解決方式：

1：找到native-echarts/src/components/Echarts/tpl.html文件，復(fù)制到android/app/src/main/assets這個目錄下面，如果文件夾不存在就新建一個即可。

2：找到文件native-echarts/src/components/Echarts/index.js，修改為一下內(nèi)容

import React, { Component } from 'react';

import { WebView, View, StyleSheet, Platform } from'react-native';

import renderChart from'./renderChart';

import echarts from'./echarts.min';

exportdefaultclass App extends Component {

constructor(props) {

super(props);

}//預(yù)防過渡渲染

shouldComponentUpdate(nextProps, nextState) {

const thisProps= this.props ||{}

nextProps= nextProps ||{}if (Object.keys(thisProps).length !==Object.keys(nextProps).length) {return true}for (const key innextProps) {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) {//解決數(shù)據(jù)改變時頁面閃爍的問題

this.refs.chart.injectJavaScript(renderChart(nextProps))

}

}

render() {return(

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}/>

);

}

}

可能存在的問題？？？？

同時，在后續(xù)的react native版本中，webview即將從react native內(nèi)部移除出去，改為三方包安裝使用。參考：

https://reactnative.cn/docs/webview/#mixedcontentmode

https://github.com/react-native-community/discussions-and-proposals/issues/6

因此，在后續(xù)新版本中使用native-echarts，可能會使用不了，因此建議fork一個穩(wěn)定的版本到自己的github上，或者在后續(xù)自己采用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

總結(jié)

以上是生活随笔為你收集整理的native react 折线图_react native中使用echarts的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。