同原生一样,react native 同样也有事件监听和回调函数这玩意.
场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面.
事件监听
事件监听类似于iOS原生的通知,一个发,一个收即可.
A界面收:
1 import { 2 DeviceEventEmitter 3 } from 'react-native';
1 componentDidMount() { 2 //收到监听 3 this.listener = DeviceEventEmitter.addListener('通知名称',(e)=>{ 4 alert(e) 5 }); 6 } 7 componentWillUnmount(){ 8 // 移除监听 9 this.listener.remove(); 10 }
B界面在pop回A界面的时候发:
1 import { 2 DeviceEventEmitter 3 } from 'react-native';
1 pop = ()=>{ 2 let value = '监听' //准备一个值 3 DeviceEventEmitter.emit('通知名称',value); //发监听 4 this.props.navigator.pop({ }) 5 }
事件回调
A界面在push到B界面的时候定义个回调函数
1 push = () =>{ 2 this.props.navigator.push({ 3 component:DetailsView, 4 passProps:{ 5 callback:(msg)=>{ alert(msg) } 6 } 7 }) 8 }
B界面在pop回A界面的时候调用该回调函数
1 pop = () =>{ 2 3 this.props.navigator.pop({ 4 }) 5 6 if(this.props.callback){ 7 this.props.callback('回调') 8 } 9 }
大致效果:
github: https://github.com/pheromone/react_native_callback_emitter