如何从Drawer.Navigator的兄弟组件访问抽屉状态？

你可以通过导航容器引用结合事件监听的方式，在外部组件中获取抽屉的开合状态，具体实现步骤如下：

1. 创建导航容器引用
   用useNavigationContainerRef钩子创建一个ref，用来获取NavigationContainer的实例。

2. 维护抽屉状态变量
   用useState声明状态变量（比如isDrawerOpen），用来记录抽屉当前的开合状态。

3. 订阅抽屉事件
   在组件挂载时，通过导航容器ref订阅drawerOpen和drawerClose两个内置事件，实时更新状态变量；组件卸载时取消订阅，避免内存泄漏。

4. 条件渲染浮动按钮
   利用isDrawerOpen状态控制FloatingActionButton的显示/隐藏，或者调整它的样式、行为。

完整代码示例：

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useState, useEffect } from 'react';

const Drawer = createDrawerNavigator();

export default function App() {
  const navigationRef = useNavigationContainerRef();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  useEffect(() => {
    // 订阅抽屉打开事件
    const unsubscribeOpen = navigationRef.addListener('drawerOpen', () => {
      setIsDrawerOpen(true);
    });

    // 订阅抽屉关闭事件
    const unsubscribeClose = navigationRef.addListener('drawerClose', () => {
      setIsDrawerOpen(false);
    });

    // 组件卸载时取消订阅
    return () => {
      unsubscribeOpen();
      unsubscribeClose();
    };
  }, [navigationRef]);

  return (
    <NavigationContainer ref={navigationRef}>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>

      {/* 根据抽屉状态条件渲染浮动按钮 */}
      {!isDrawerOpen && <FloatingActionButton />}
    </NavigationContainer>
  );
}

补充说明：drawerOpen和drawerClose是React Navigation抽屉导航器的内置全局事件，只要导航容器引用能关联到抽屉导航器实例，就能正常触发这些事件，无需额外配置。

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