React Navigation V5中NavigationContainer包裹后onStateChange不触发问题咨询

嘿，刚接触React别慌，我帮你一步步解决这个问题~

首先回答你的核心疑问：当然可以改用函数组件包裹，而且结合React Navigation V5的hooks能完美解决你的屏幕追踪和抽屉状态检测问题！ #

先拆解你的问题：

1. V5中原来的类组件HOC方案失效，因为NavigationContainer不再像V4的createAppContainer那样给子组件传递导航状态回调
2. 想转用函数组件+hooks实现屏幕追踪，同时检测抽屉的开合状态

解决方案一：用函数组件HOC替代类组件，结合useNavigationState实现屏幕追踪 #

首先把你的Wrapper.tsx改成函数组件风格的高阶组件，利用React Navigation提供的useNavigationState钩子来监听导航状态变化：

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

export function withNavigationTracking(Component: React.FC) {
  return function TrackedComponent() {
    // 获取当前的导航状态，状态变化时会自动更新
    const navState = useNavigationState(state => state);

    // 组件挂载时的初始化逻辑（对应原来的componentDidMount）
    React.useEffect(() => {
      console.log('PND Mounted - First Time Screen');
      return () => {
        // 组件卸载时的清理逻辑（对应componentWillUnmount）
      };
    }, []);

    // 监听导航状态变化（包括屏幕切换、抽屉状态改变）
    React.useEffect(() => {
      if (navState) {
        console.log('Navigation state updated:', navState);
        // 这里可以根据state做各种自定义逻辑，比如判断当前活跃屏幕
      }
    }, [navState]); // 只有navState变化时才会触发

    return <Component />;
  };
}

然后在App.js里这样使用：

import { NavigationContainer } from '@react-navigation/native';
import { withNavigationTracking } from './Wrapper';

const Drawer = createDrawerNavigator();
function MyDrawer() {
  return (
    <Drawer.Navigator drawerType="front" drawerPosition="left">
      <Drawer.Screen name="Properties" component={PropertiesTabs} />
      <Drawer.Screen name="Profile" component={Profile} />
    </Drawer.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

// 用我们的追踪HOC包裹App组件
export default withNavigationTracking(App);

解决方案二：检测抽屉开合状态的专属方案 #

React Navigation V5专门为抽屉导航提供了useDrawerStatus钩子，能直接获取抽屉的状态（open/closed/opening/closing），非常方便：

你可以在MyDrawer组件内部或者追踪组件里使用它：

import { useDrawerStatus } from '@react-navigation/drawer';

function MyDrawer() {
  const drawerStatus = useDrawerStatus();

  React.useEffect(() => {
    console.log('Drawer status changed:', drawerStatus);
    if (drawerStatus === 'open') {
      // 抽屉打开后的逻辑
      console.log('抽屉打开啦！');
    } else if (drawerStatus === 'closed') {
      // 抽屉关闭后的逻辑
      console.log('抽屉关闭啦！');
    }
  }, [drawerStatus]);

  return (
    <Drawer.Navigator drawerType="front" drawerPosition="left">
      <Drawer.Screen name="Properties" component={PropertiesTabs} />
      <Drawer.Screen name="Profile" component={Profile} />
    </Drawer.Navigator>
  );
}

为什么原来的V4方案在V5失效？ #

V4的createAppContainer会返回一个接受onNavigationStateChange的组件，但V5的NavigationContainer是直接处理导航状态的根组件，它自己接受onStateChange属性，而你之前把NavigationContainer放在被包裹的组件里，然后给这个组件传onStateChange，但这个自定义组件根本没有这个props，所以自然不会触发回调。

现在用hooks的方案完全符合React的声明式风格，也更贴合V5的设计思路~

内容的提问来源于stack exchange，提问作者Mike.R