React Native中返回操作（含物理键）触发后调用函数的实现

要实现从pageA返回pageB（包括点击物理返回键）时执行getUserInfo函数，你需要监听pageB的页面聚焦状态——返回操作会让pageB重新获得焦点，此时触发目标函数即可。下面是两种可靠的实现方式：

方法1：使用React Navigation的useFocusEffect钩子（推荐） #

这是React Navigation专为页面聚焦场景提供的钩子，配合useCallback可避免不必要的重复执行：

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

// pageB组件内部
useFocusEffect(
  useCallback(() => {
    // 每次页面聚焦时执行（包括从pageA返回、物理返回的情况）
    getUserInfo();

    // 可选：如果需要在页面失去焦点时清理资源，可添加返回函数
    return () => {
      // 例如取消未完成的网络请求、清除定时器等
    };
  }, []) // 空数组表示仅在组件挂载时绑定一次监听，聚焦时重复触发回调
);

方法2：通过navigation.addListener监听focus事件 #

如果更习惯原生事件监听的方式，可直接给navigation对象添加focus事件监听器：

import { useEffect } from 'react';

// pageB组件内部
useEffect(() => {
  // 绑定focus事件监听器
  const unsubscribe = navigation.addListener('focus', () => {
    getUserInfo();
  });

  // 组件卸载时必须取消监听，防止内存泄漏
  return unsubscribe;
}, [navigation]); // 依赖navigation对象，确保监听正确绑定

原有代码的问题 #

你在pageB中使用的useEffect没有添加依赖数组，会导致getUserInfo在组件每次渲染时重复执行，且无法区分是首次加载还是从其他页面返回的场景。上面两种方案通过监听页面聚焦状态，精准触发目标函数，同时兼容物理返回键的场景。

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