react native 中,组件间通信无非3种情况:

以DEMO为例,有2个组件Input和 ShowText 。

1、组件嵌套,即Input是ShowText的子组件,在组件间通信可以通过state进行。
2、组件为同级关系,即Input和ShowText都属于页面级别内的组件,这是常见的组件间通信,可各自提供接口进行通信,利用props进行
3、除了以上2种的关系外的组件,比如Input在一个Container组件内,页面级别只有2个组件Container和ShowText。这种情况下,可创建一个全局的通信类。在react-native的2014 example 中 都有这样的代码,这里就不再贴代码了。

源码可查看github:https://github.com/baofen14787/react-native-communicate-demo

第一种情况:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');


var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


var Input = React.createClass({

    handleUpdateChange(text) {
        this.props.updateChange(text);
    },


  render() {

    return (
        <TextInput onChangeText={(text) => this.handleUpdateChange(text)} style={{ width : 200, height: 40, borderColor: 'gray', borderWidth: 1}} />
    );
  }
});




var ShowText = React.createClass({

    getInitialState(){
      return {
        text : '我是文字'
      }
    },

    handleChange(textValue){
      this.setState({
        text: textValue
      });
    },

    render() {

        return (
          <View style={{flex : 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
            <Text>{this.state.text}</Text>
            <Input updateChange={this.handleChange} />
          </View>
        );
    }
});

module.exports = React.createClass({

  render() {
    return (
      <View style={styles.container}>
        <ShowText />
      </View>
    );
  }
});

第二种情况:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');


var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


var Input = React.createClass({

    handleUpdateChange(text) {
        this.props.updateChange(text);
    },


  render() {

    return (
      <View style={{flex : 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <TextInput onChangeText={(text) => this.handleUpdateChange(text)} style={{ width : 200, height: 40, borderColor: 'gray', borderWidth: 1}} />
      </View>
    );
  }
});




var ShowText = React.createClass({


    render() {

        return (
          <View style={{flex : 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
            <Text>{this.props.text}</Text>
          </View>
        );
    }
});

module.exports = React.createClass({

  getInitialState(){
    return {
      text : '我是文字'
    }
  },

  handleChange(textValue){
    this.setState({
      text: textValue
    });
  },

  render() {
    return (
      <View style={styles.container}>
        <Input updateChange={this.handleChange} />
        <ShowText text={this.state.text} />
      </View>
    );
  }
});

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required