React-Native子组件修改父组件的几种方式，兄弟组件状态修改

子组件修改父组件的状态，在开发中非常常见，下面列举了几种方式。
DeviceEventEmitter可以跨组件，跨页面进行数据传递，还有一些状态的修改。http://www.jianshu.com/p/c6991a241b4f

兄弟组件可以进行修改，所谓兄弟组件，就是说同一个页面，有两个组件，组件A，组件B，组件A的状态的变化，可以导致组件B的状态变化，有两种方式。第一种，使用DeviceEventEmitter跨组件通信。第二种，在页面内定义一个State，组件A，使用props属性引入，操作组件A，修改页面内的State，然后，组件B，也是引入页面内的State，所有，当组件A状态变化时，修改页面的State,重新Render，然后，更新组件B，组件B进行Render。

二： Coding
新建三个组件：分别为PostCallMsgAndMsg，PostCallMsg，PostMsg；
在Msg进行使用。

import React,{ Component } from 'react';
import {
    AppRegistry,StyleSheet,Text,View,DeviceEventEmitter
} from 'react-native';
import PostMsg from './PostMsg'
import PostCallMsg from './PostCallMsg'
import PostCallMsgAndMsg allMsgAndMsg'

export default class Msg extends Component {
    constructor(props){
        super(props);
        this.state={
            listenerMsg:'listenerMsg',callMsg:'callMsg',callMsgAndMsg:'callMsgAndMsg'

        }
    }


    componentDidMount() {
        //注意addListener的key和emit的key保持一致
        this.msgListener = DeviceEventEmitter.addListener('Msg',(listenerMsg) => {
            this.setState({
                listenerMsg:listenerMsg,})
        });

    }

    componentWillUnmount() {
        //此生命周期内，去掉监听
        this.msgListener&&this.msgListener.remove();
    }



    render() {
        return (
            <View style={styles.container}>
                    <Text>第一种方式  DeviceEventEmitter：</Text>
                    <Text>{this.state.listenerMsg}</Text>
                    <PostMsg />

                    <Text>第二种方式  CallBack：</Text>
                    state.callMsg}</Text>
                    <PostCallMsg onChangeMsg={ this.onMsgByCall }/>

                    <Text>第三种方式  CallBack有参数：</Text>
                    state.callMsgAndMsg}</Text>
                    <PostCallMsgAndMsg onChangeMsg={(msg)=>{
                        this.onMsgByCallAndMsg(msg)
                    } }/>

            </View>
        );
    }

    all=()=>{
        this.setState({
            callMsg:'通过CallBack修改父组件状态值'
        })
    }


    allAndMsg=(msg)=>{
        this.setState({
            callMsgAndMsg:msg
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,justifyContent: 'center',alignItems:'center',},});

import React,{ Component } from 'react';
import {
    AppRegistry,StyleSheet,0);">Text,0);">View,0);">TouchableOpacity,} from 'react-native';

export default class PostCallMsgAndMsg extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.viewLine}/>
                <TouchableOpacity onPress={this._postMsgByCallBack}>
                    <Text>PostCallMsgAndMsg</Text>
                </TouchableOpacity>
            </View>
        );
    }


    _postMsgByCallBack=()=>{
        if(this.props.onChangeMsg){
            this.props.onChangeMsg('通过PostCallMsgAndMsg来传递属性');
        }
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',alignItems: 20,});

PostCallMsg Callback</this.props.onChangeMsg();
        }
    }
}

const styles = import React,0);">from 'react';
import {
    AppRegistry,TouchableOpacity,DeviceEventEmitter,} 'react-native';

export PostMsg return (
            <View style={styles.container}> TouchableOpacity onPress={this._postMsgByListener}> Text>DeviceEventEmitter</Text> TouchableOpacity> View>
        );
    }

    _postMsgByListener=()=>{
        DeviceEventEmitter.emit('Msg','此消息来自于子组件，DeviceEventEmitter父组件进行修改和状态变化');
    }

}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',alignItems: marginBottom:（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!