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