react native 之 事件监听 和 回调函数

同原生一样,react native 同样也有事件监听和回调函数这玩意.

场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面.

事件监听

事件监听类似于iOS原生的通知,一个发,一个收即可.

A界面收:

import {
    DeviceEventEmitter
} from 'react-native';

 componentDidMount() {
        //收到监听
        this.listener = DeviceEventEmitter.addListener('通知名称',(e)=>{
            alert(e)
        });
    }
    componentWillUnmount(){
        // 移除监听 
        this.listener.remove();
    }

B界面在pop回A界面的时候发:

import {
    DeviceEventEmitter
} from 'react-native';

    pop = ()=>{
        let value = '监听'   //准备一个值
        DeviceEventEmitter.emit('通知名称',value); //发监听
        this.props.navigator.pop({ })
    }

事件回调　

A界面在push到B界面的时候定义个回调函数

push = () =>{
    this.props.navigator.push({
        component:DetailsView,
        passProps:{
            callback:(msg)=>{ alert(msg) }
        }
    })
}

B界面在pop回A界面的时候调用该回调函数

pop = () =>{

    this.props.navigator.pop({
    })

    if(this.props.callback){
        this.props.callback('回调')
    }
}

大致效果:

                                                                                                                             

github: https://github.com/pheromone/react_native_callback_emitter