React Native如何检测页面导航变化以触发特定屏幕更新函数

你现在遇到的问题本质很简单：

• 栈导航跳转时，之前打开过的屏幕不会被销毁，只是被压在导航栈下层，再切回这个屏幕的时候组件不会重新挂载，所以只跑一次的componentDidMount自然触发不了后续的更新
• AppState仅能监测应用从后台切前台、前台切后台的状态，根本监测不到应用内部页面之间的跳转

现在主流的React Navigation生态下，不需要自己写自定义路由监听逻辑，直接用内置能力就能实现每次进入屏幕都触发更新的需求，按你用的组件写法选对应的方案就行：

函数组件场景：用useFocusEffect钩子 #

这是官方专门为「每次屏幕聚焦时执行副作用」设计的API，性能和适配性最好：

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

// 比如你的用户中心页面
function UserCenterScreen() {
  // 每次首次进入、从其他页面切回当前页都会执行回调
  useFocusEffect(
    useCallback(() => {
      // 这里替换成你要触发的更新函数，比如拉取最新用户信息、刷新未读消息数
      refreshUserInfo();

      // 可选：如果需要在切走页面时做清理，把清理逻辑写在return里就行
      return () => {
        // 比如取消未完成的请求、移除自定义事件监听
      }
    }, []) // 依赖数组按需配置，比如你依赖当前用户ID的话，就把userID加进来
  );

  return <View>{/* 页面内容 */}</View>;
}

注意：一定要把回调函数用useCallback包裹，不然每次组件重渲染都会重新绑定监听，造成不必要的性能消耗。

类组件场景：两种实现方式可选 #

如果你现在的页面是类组件写法，不想重构为函数组件，直接选下面任意一种方式就行：

方式1：用withNavigationFocus高阶组件注入聚焦状态 #

这个API会给组件加一个isFocused属性，你只需要在生命周期里监听这个属性的变化，就能拿到聚焦时机：

import React from 'react';
import { withNavigationFocus } from '@react-navigation/native';

class OrderListScreen extends React.Component {
  componentDidUpdate(prevProps) {
    // 当页面从非聚焦状态变为聚焦状态时，触发更新
    if (!prevProps.isFocused && this.props.isFocused) {
      this.loadLatestOrders(); // 替换成你的更新函数
    }
  }

  render() {
    return <View>{/* 页面内容 */}</View>;
  }
}

export default withNavigationFocus(OrderListScreen);

方式2：直接绑定导航对象的聚焦事件 #

如果不想用高阶组件包裹，也可以直接给navigation对象绑定事件，记得卸载的时候解绑防止内存泄漏：

import React from 'react';

class CartScreen extends React.Component {
  componentDidMount() {
    // 绑定聚焦事件，每次进入页面都会触发回调
    this.unbindFocusListener = this.props.navigation.addListener('focus', () => {
      this.refreshCartBadge(); // 替换成你的更新函数
    });
  }

  componentWillUnmount() {
    // 页面销毁时解绑事件，避免内存泄漏
    this.unbindFocusListener();
  }

  render() {
    return <View>{/* 页面内容 */}</View>;
  }
}

如果你的目标屏幕是嵌套在Tab导航、Drawer导航下的，上面的方法不需要做任何修改，都会正常触发——因为所有导航容器的聚焦事件都会向上传递到屏幕组件，不需要单独写嵌套逻辑。

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