更新 src/components/Echarts/index.js

package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/somonus/react-native-echarts#readme",
   "dependencies": {
-    "echarts": "3.2.3"
+    "echarts": "3.2.3",
+    "react-native-webview":"13.8.7"
   }
 }

src/components/Echarts/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { WebView, View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
+import WebView from 'react-native-webview';
 import renderChart from './renderChart';
 import echarts from './echarts.min';
 
@@ -11,7 +12,7 @@ export default class App extends Component {
   }
   
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(nextProps.option !== this.props.option) {
       this.refs.chart.reload();
     }
@@ -22,6 +23,10 @@ export default class App extends Component {
   }
 
   render() {
+    const source = Platform.OS === 'ios'
+      ? require('./tpl.html')  // iOS使用require方式加载
+      : { uri: 'file:///android_asset/tpl.html' };  // Android从assets目录加载
+
     return (
       <View style={{flex: 1, height: this.props.height || 400,}}>
         <WebView
@@ -34,7 +39,7 @@ export default class App extends Component {
           }}
           scalesPageToFit={Platform.OS !== 'ios'}
           originWhitelist={['*']}
-          source={require('./tpl.html')}
+          source={source}
           onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
         />
       </View>

src/index.js

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