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 {
    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