Merge d659fbcb33 into 0ae9a6386c

README.md

@@ -6,7 +6,7 @@
   
 ## install
 
-$ npm install native-echarts --save
+$ npm install native-echarts react-native-webview --save
 
 ## Usage
 
@@ -80,6 +80,7 @@ screenshots：
 ![image](https://github.com/somonus/react-native-echarts/blob/master/example/demoIOS.png)
 
 ### Android
+copy tpl.html to android\app\src\main\assets
 
 Open the Android project in the android directory with Android Studio and click run.
 

src/components/Echarts/index.js

@@ -1,31 +1,40 @@
 import React, { Component } from 'react';
-import { WebView, View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
 import renderChart from './renderChart';
+import WebView from 'react-native-webview';
 import echarts from './echarts.min';
-
+// 版本变更https://zhuanlan.zhihu.com/p/89494013
 export default class App extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {chart:null};
+    // refs 弃用了 https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
+    this.chart = null;
+    this.setChart = element => {
+      this.setState({chart:element})
+    };
     this.setNewOption = this.setNewOption.bind(this);
   }
   
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if(nextProps.option !== prevState.option) {
+      prevState.chart && prevState.chart.reload();
+    }
 
-  componentWillReceiveProps(nextProps) {
-    if(nextProps.option !== this.props.option) {
-      this.refs.chart.reload();
-    }
+    return null;
   }
 
+
   setNewOption(option) {
-    this.refs.chart.postMessage(JSON.stringify(option));
+    this.state.chart && this.state.chart.postMessage(JSON.stringify(option));
   }
 
   render() {
     return (
       <View style={{flex: 1, height: this.props.height || 400,}}>
         <WebView
-          ref="chart"
+          ref = {this.setChart} 
           scrollEnabled = {false}
           injectedJavaScript = {renderChart(this.props)}
           style={{
@@ -34,7 +43,8 @@ export default class App extends Component {
           }}
           scalesPageToFit={Platform.OS !== 'ios'}
           originWhitelist={['*']}
-          source={require('./tpl.html')}
+          // source={require('./tpl.html')}
+          source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
           onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
         />
       </View>

src/components/Echarts/tpl.html

@@ -11,7 +11,7 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        // overflow: hidden;
+        /* overflow: hidden; */
 
       }
       #main {

src/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { WebView, View } from 'react-native';
 import { Container, Echarts } from './components'
 
 export default class App extends Component {