react native 之子组件和父组件之间的通信

react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值.

父组件传递给子组件:

父组件:

在主组件里面,使用通过写一个子组件的属性,直接把值或者navigator传给子组件即可.如下20行:

 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  *  父组件传递给子组件
  *  父组件把值或者navigator传给子组件,然后在子组件里面实现push和显示
  */

 import React, { Component } from 'react';
 import ChildOne from './ChildOne'
 import {
     AppRegistry,
     StyleSheet,
     Text,
     View
 } from 'react-native';

 export default class HomeOne extends Component {
     render() {
         return (
20           <ChildOne navigatorPush = {this.props.navigator} passValue = '我是一个父组件传给子组件的值'/>
         );
     }
 }

 const 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,
     },
 });

子组件:

子组件这边可以直接使用主组件写的属性push和pop,通过this.props.属性名使用传过来的值.如下24行.31行

 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  *  父组件传递给子组件
  */

 import React, { Component } from 'react';
 import {
     AppRegistry,
     StyleSheet,
     Text,
     View,
     navigator,
 } from 'react-native';
 import OneDetails from './OneDetails'
 export default class ChildOne extends Component {
     render() {
         return (
             <View style={styles.container}>
                 <Text style={styles.welcome}  onPress={()=>this.pushOneDetails()}>
                     我是子组件ONE
                 </Text>
                 <Text>
24                     {this.props.passValue}
                 </Text>
             </View>
         );
     }
     pushOneDetails = ()=>{
30
31         this.props.navigatorPush.push({
32         component:OneDetails
33     })
 }
 }

 const 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,
     },
 });

子组件传递给父组件:

子组件:

自组件通过定义一个属性直接把事件传递给主组件,这样就可以在点击子组件实现在主组件里面实现push和pop,如下22行.28行.通过static....把值传给主组件使用,如行17-19

 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  *  子组件传递给父组件
  */

 import React, { Component } from 'react';
 import {
     AppRegistry,
     StyleSheet,
     Text,
     View
 } from 'react-native';

 export default class ChildTwo extends Component {
1     static defaultProps = {
18         two: '我是子组件传给主组件的值'
19     };
     render() {
         return (
                 <Text style={styles.welcome} onPress={()=>this.passMenthod()}>
                     我是子组件TWO
                 </Text>
         );
     }
     passMenthod = () =>{
28         this.props.pushDetails()
29     }
 }

 const 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,
     },
 });

父组件:

      

父组件这边直接通过子组件的属性来接受事件,从而在主组件这边push和pop.如行29,行37-39.通过子组件.属性名.值使用子组件传过来的值,如行31

 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  *  子组件传递给父组件
  *  子组件把事件或值传递给父组件,然后在父组件push和显示
  */

 import React, { Component } from 'react';
 import {
     AppRegistry,
     StyleSheet,
     Text,
     View
 } from 'react-native';
 import ChildTwo from './ChildTwo'
 import TwoDetails from './TwoDetails'
 export default class HomeTwo extends Component {
     // 构造
       constructor(props) {
         super(props);
         // 初始状态
         this.state = {
             value:''
         };
       }
     render() {
         return (
             <View style={styles.container}>
             <ChildTwo pushDetails = {()=>this.pushDetails()} />
                 <Text>
31                     {ChildTwo.defaultProps.two}
                 </Text>
             </View>
         );
     }
     pushDetails = ()=>{
37         this.props.navigator.push({
38             component:TwoDetails
39         })
     }
 }

 const 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,
     },
 });

项目代码:https://github.com/pheromone/react-native-childComponent-component