React Native：如何检测Alert或新页面关闭后原页面恢复并获取回调？

嘿，这个问题我刚好在项目里处理过好几次！在React Native中要实现类似Android onResume的页面恢复回调——不管是页面从后台切回前台，还是关闭Alert弹窗、从新页面返回后原页面恢复显示，有几个靠谱的方案可以选：

1. 跨平台通用：AppState API #

这是React Native官方提供的跨平台工具，专门用来监听应用的前后台状态变化，同时完美覆盖Alert弹窗关闭、模态页返回这类场景（因为这些操作会让当前页面重新获得用户交互焦点）。

代码示例：

import { AppState, useEffect } from 'react-native';

function YourTargetScreen() {
  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      // 当应用从非活跃状态切换回活跃状态时触发
      if (nextAppState === 'active') {
        console.log('页面恢复显示啦！');
        // 这里写你的回调逻辑，比如刷新数据、更新页面状态
      }
    };

    // 添加状态监听
    AppState.addEventListener('change', handleAppStateChange);
    
    // 组件卸载时记得移除监听，避免内存泄漏
    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);

  return (
    // 你的页面组件内容
  );
}

注意：AppState的active状态对应应用处于前台且用户可交互的状态，不管是从后台切回应用，还是关闭Alert/模态弹窗，都会触发这个状态切换。

2. 页面级精准监听：React Navigation的useFocusEffect #

如果你用React Navigation管理页面路由，那useFocusEffect会是更精准的选择——它专门监听当前页面是否获得焦点，包括从其他页面返回、模态页关闭的场景，比AppState更贴合单个页面的需求。

代码示例：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

function YourTargetScreen() {
  useFocusEffect(
    useCallback(() => {
      // 页面获得焦点时触发（包括从其他页面返回、关闭弹窗后）
      console.log('当前页面恢复显示！');
      // 执行你的业务逻辑，比如重新请求接口数据

      // 可选：页面失去焦点时的清理逻辑
      return () => {
        console.log('页面失去焦点，可做一些清理操作');
      };
    }, [])
  );

  return (
    // 页面内容
  );
}

优势：相比AppState，它只针对当前页面的焦点变化，不会受到其他页面状态的干扰，适合页面级的回调需求。

3. Alert弹窗单独处理（可选） #

如果只是想单独监听Alert弹窗的关闭，Alert组件自带的onPress回调就能实现——每个弹窗按钮都可以设置点击后的逻辑，包括取消按钮：

import { Alert } from 'react-native';

Alert.alert(
  '提示',
  '这是一个测试弹窗',
  [
    {
      text: '取消',
      onPress: () => {
        console.log('弹窗关闭，页面恢复交互');
        // 这里写弹窗关闭后的专属逻辑
      },
      style: 'cancel',
    },
    { text: '确定', onPress: () => console.log('确定按钮被点击') },
  ]
);

不过这种方式只能单独处理Alert场景，没法覆盖页面返回的情况，所以一般建议结合前面两种方案使用。

• 要是需要跨平台、全局级的页面恢复监听，选AppState；
• 要是基于React Navigation做页面级的精准监听，优先用useFocusEffect；
• 要是只需要单独处理Alert关闭，用Alert自带的onPress回调。

这些方案基本能完全覆盖你提到的Android onResume类似的场景啦！

内容的提问来源于stack exchange，提问作者Drim