前言
Demo: https://github.com/YouCii/RNDemo
有时我们在返回某页面时, 希望能重新取数据刷新下界面, 如果是在android中可以在onResume
中处理, 那在RN中应该怎么做呢?
尝试
componentWillMount() / componentDidMount()
: 事实证明这些方法只会执行一遍, 类似于onCreate
, 从其他界面返回时不会再执行.- 使用
this.props.navigation.replace()
而不是this.props.navigation.navigate()
: 这种方式会重建界面, 所以会执行新界面的componentWillMount() / componentDidMount()
. 不过这种方式有个问题, 就是没有navigate()
的页面切换动画了. - 使用
DeviceEventEmitter
- 使用navigation(screen, {callback:()=>{…}}), 此篇不讲
DeviceEventEmitter
没有办法, 没找到生命周期方法只能使用监听了, DeviceEventEmitter其实更像一个广播或者EventBus
. 其使用方法也比较简单, 和EventBus
很类似
在监听页面A:
import {DeviceEventEmitter} from 'react-native' componentDidMount() { // 这里的`param`可以不写 this.subscription = DeviceEventEmitter.addListener("EventType", (param)=>{ // 刷新界面等 }); } componentWillUnmount() { this.subscription.remove(); }
发送Event界面B:
import {DeviceEventEmitter} from 'react-native' onPress={() => { this.props.navigation.navigate('A'); // 这里的param可以不写 DeviceEventEmitter.emit("EventType", param); }}>
这样的话, 在从B页面返回A页面时, A就已经执行了监听方法了
PS: 建议DeviceEventEmitter.emit("EventType")
中的"EventType"
使用对象引用, 以免字符串写错之类的.
/**
* 用于存储所有的监听事件类型
*/
export default class EmitterEvents {
/**
* 返回登录页面是刷新下属性
*/
static BACK_TO_LOGIN = 'BACK_TO_LOGIN'
}
DeviceEventEmitter.emit(EmitterEvents.BACK_TO_LOGIN)