React Navigation：如何检测用户进入指定页面？

一、检测用户切换至Dashboard页面（执行AJAX请求） #

因为Stack Navigation中Dashboard组件挂载后不会重复卸载/挂载，componentDidMount只会触发一次。这里推荐用React Navigation提供的焦点监听API，完美适配这种场景：

1. 函数组件：使用useFocusEffect #

这个钩子会在页面获得焦点时触发（包括从其他页面切回），刚好用来执行每次进入都需要的AJAX请求：

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

function Dashboard() {
  useFocusEffect(
    useCallback(() => {
      // 执行AJAX请求逻辑
      const fetchDashboardData = async () => {
        const response = await fetch('你的API地址');
        const data = await response.json();
        // 处理数据，比如dispatch到Redux
      };
      fetchDashboardData();

      // 可选：返回清理函数，比如取消未完成的请求
      return () => {
        // 用AbortController取消请求的示例
        // abortController?.abort();
      };
    }, [])
  );

  return <你的Dashboard内容组件 />;
}

2. 类组件：使用withNavigationFocus高阶组件 #

如果你的Dashboard是类组件，可以用这个HOC注入isFocused属性，在componentDidUpdate里检测焦点变化：

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

class Dashboard extends React.Component {
  componentDidUpdate(prevProps) {
    // 当从非聚焦切换到聚焦状态时，执行请求
    if (this.props.isFocused && !prevProps.isFocused) {
      this.fetchDashboardData();
    }
  }

  fetchDashboardData = async () => {
    const response = await fetch('你的API地址');
    const data = await response.json();
    // 处理数据逻辑
  };

  render() {
    return <你的Dashboard内容组件 />;
  }
}

// 用HOC包裹组件后导出
export default withNavigationFocus(Dashboard);

二、导航跳转时向Redux Store发送Action #

要实现全局监听导航跳转并自动dispatch action，不需要修改每个页面的导航逻辑，推荐通过监听导航容器的状态变化来实现：

方案：用useNavigationContainerRef监听导航状态 #

在根App组件中，通过导航容器的ref监听状态变化，每次导航路由更新时发送Redux action：

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { useDispatch } from 'react-redux';
import { useEffect } from 'react';

// 假设你已经定义了页面跟踪的action
import { trackScreenChange } from './redux/actions';

function App() {
  const navigationRef = useNavigationContainerRef();
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = navigationRef.addListener('state', () => {
      // 获取当前活跃的路由名称
      const currentRoute = navigationRef.getCurrentRoute()?.name;
      if (currentRoute) {
        // 向Redux发送页面切换的action
        dispatch(trackScreenChange(currentRoute));
      }
    });

    // 组件卸载时清理监听
    return unsubscribe;
  }, [navigationRef, dispatch]);

  return (
    <NavigationContainer ref={navigationRef}>
      {/* 你的Stack Navigator配置 */}
      <Stack.Navigator>
        {/* ...你的页面路由 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果想把这个逻辑封装成可复用组件，也可以自定义一个导航容器，把监听逻辑封装进去，之后直接用自定义容器替代原生NavigationContainer即可，核心逻辑和上面一致。

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