fixed #4

Author: somonus

example/index.ios.js

@@ -9,36 +9,71 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  TouchableOpacity
 } from 'react-native';
 import Echarts from 'native-echarts';
 
 export default class app2 extends Component {
-  render() {
-    const option = {
-      title: {
-          text: 'ECharts 入门示例'
-      },
-      tooltip: {},
-      legend: {
-          data:['销量']
-      },
-      xAxis: {
-          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+  constructor(props) {
+    super(props);
+  
+    this.state = {
+      option : {
+        title: {
+            text: 'ECharts 入门示例'
+        },
+        tooltip: {},
+        legend: {
+            data:['销量']
+        },
+        xAxis: {
+            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+        },
+        yAxis: {},
+        series: [{
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+        }]
       },
-      yAxis: {},
-      series: [{
-          name: '销量',
-          type: 'bar',
-          data: [5, 20, 36, 10, 10, 20]
-      }]
+      text: 'test'
     };
+  }
+
+  changeOption() {
+    this.setState({
+      option: {
+        title: {
+            text: 'New Chart'
+        },
+        tooltip: {},
+        legend: {
+            data:['销量']
+        },
+        xAxis: {
+            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+        },
+        yAxis: {},
+        series: [{
+            name: '销量',
+            type: 'line',
+            data: [5, 20, 36, 10, 10, 20]
+        }]
+      }
+    })
+  }
+
+  render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native Echarts!
         </Text>
-        <Echarts option={option} height={300} />
+        <TouchableOpacity style={styles.button} onPress={this.changeOption.bind(this)}>
+          <Text style={{color: '#fff'}}>change state</Text>
+        </TouchableOpacity>
+        <Echarts option={this.state.option}  height={300} />
       </View>
     );
   }
@@ -56,6 +91,12 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     margin: 30,
   },
+  button: {
+    backgroundColor: '#d9534f',
+    padding: 8,
+    borderRadius: 4,
+    marginBottom: 20
+  }
 });
 
 AppRegistry.registerComponent('app2', () => app2);

src/components/Echarts/index.js

@@ -1,21 +1,28 @@
 import React, { Component } from 'react';
-import { WebView } from 'react-native';
+import { WebView, View, StyleSheet } from 'react-native';
 import renderChart from './renderChart';
 import echarts from './echarts.min';
 
 export default class App extends Component {
+  componentWillReceiveProps(nextProps) {
+    if(nextProps.option !== this.props.option) {
+      this.refs.chart.reload();
+    }
+  }
+
   render() {
     return (
-      <WebView
-        scrollEnabled = {false}
-        injectedJavaScript = {renderChart(this.props)}
-        style={{
-          height: this.props.height || 400,
-        }}
-        source={require('./tpl.html')}
-      />
+      <View style={{flex: 1, height: this.props.height || 400,}}>
+        <WebView
+          ref="chart"
+          scrollEnabled = {false}
+          injectedJavaScript = {renderChart(this.props)}
+          style={{
+            height: this.props.height || 400,
+          }}
+          source={require('./tpl.html')}
+        />
+      </View>
     );
   }
 }
-
-