ReactNative 如何实现页面返回监听

本文探讨了在React Native中实现页面返回时的数据刷新方法。详细介绍了使用componentWillMount及componentDidMount的局限性,并提出了利用DeviceEventEmitter进行监听刷新的有效方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

Demo: https://github.com/YouCii/RNDemo

有时我们在返回某页面时, 希望能重新取数据刷新下界面, 如果是在android中可以在onResume中处理, 那在RN中应该怎么做呢?


尝试

  1. componentWillMount() / componentDidMount(): 事实证明这些方法只会执行一遍, 类似于 onCreate, 从其他界面返回时不会再执行.
  2. 使用this.props.navigation.replace()而不是this.props.navigation.navigate(): 这种方式会重建界面, 所以会执行新界面的componentWillMount() / componentDidMount(). 不过这种方式有个问题, 就是没有navigate()的页面切换动画了.
  3. 使用DeviceEventEmitter
  4. 使用navigation(screen, {callback:()=>{…}}), 此篇不讲

DeviceEventEmitter

没有办法, 没找到生命周期方法只能使用监听了, DeviceEventEmitter其实更像一个广播或者EventBus. 其使用方法也比较简单, 和EventBus很类似

  1. 在监听页面A:

    import {DeviceEventEmitter} from 'react-native'
    
    componentDidMount() {
        // 这里的`param`可以不写
        this.subscription = DeviceEventEmitter.addListener("EventType", (param)=>{
            // 刷新界面等
        });
    }
    
    componentWillUnmount() {
        this.subscription.remove();
    }
  2. 发送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)
### React Native 中实现页面导航与跳转的最佳实践 在 React Native 开发中,`React Navigation` 是最常用的库之一,用于处理页面之间的导航和跳转。以下是关于如何通过 `React Navigation` 实现页面导航与跳转的具体方法。 #### 安装依赖 为了使用 `React Navigation` 的功能,首先需要安装必要的依赖项[^3]: ```bash npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context npm install @react-navigation/stack ``` 如果还需要底部标签栏,则可以额外安装以下包: ```bash npm install @react-navigation/bottom-tabs ``` #### 配置导航容器 创建一个根组件来配置整个应用程序的导航结构。通常会将此逻辑放在单独的一个文件中(如 `RootStack.js` 或 `MainTab.js`),并将其导入到主入口文件 `App.js` 中[^2]: ```javascript import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); function RootStack() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default RootStack; ``` 上述代码定义了一个简单的堆栈导航器,并设置了两个屏幕:“Home” 和 “Details”。其中 `initialRouteName` 属性指定了启动时默认显示的第一个页面[^4]。 #### 页面间跳转 要从当前页面跳转至另一个页面,可以通过传递给组件的 `navigation` 对象调用其内置的方法完成操作。例如,在某个按钮点击事件处理器内部执行如下命令即可触发跳转动作[^5]: ```javascript this.props.navigation.navigate('Details', { itemId: 86 }); ``` 这里传入的目标名称应匹配之前声明过的路由名;第二个参数是一个可选的对象形式数据负载,可用于携带附加信息供目标页读取利用。 对于更复杂的场景比如带参返回或者监听状态变化等情况,则可能需要用到其他高级特性如设置回调函数等进一步增强交互体验效果。 另外值得注意的是除了基本的 push/pop 动作之外还有 replace reset 等多种方式可供选择依据实际需求灵活运用从而达到最佳用户体验目的。 最后提到一种特殊类型的链接即锚点定位技术虽然不属于传统意义上的跨屏转移范畴但在某些特定场合下也非常有用处比如说长列表滚动视图内的快速定位服务等等这时候就可以考虑引入专门针对此类问题设计插件解决方案像前面所提及的那个第三方开源项目一样提供便捷易用API接口帮助开发者高效达成任务目标[^1]。 ```javascript // 示例:使用 react-native-anchors 进行锚点跳转 import Anchors from 'react-native-anchors'; <Anchors.Anchor id="section1">...</Anchors.Anchor> <Anchors.ScrollTo anchorId="section1" /> ``` 以上就是有关于怎样借助 React Navigation 库以及相关工具集成功构建起一套完善可靠的移动端应用内多级层次化浏览体系架构全过程介绍完毕希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值