从同级组件访问 DrawerStatus

Question

我的主应用程序包含一个

NavigationContainer

和一个

Drawer.Navigator

，其中包含其

Drawer.Screen

组件。

在

Navigator

之外，我在

NavigationContainer

中有一个浮动操作按钮组件，我想根据导航抽屉是否打开来有条件地渲染。

const Drawer = createDrawerNavigator()

export default function App() {
    return (
        <NavigationContainer ...>
          
          <Drawer.Navigator ...>
            <Drawer.Screen ... />
            <Drawer.Screen ... />
            <Drawer.Screen ... />
           
          </Drawer.Navigator>
          
          <FloatingActionButton />
           
        </NavigationContainer>
      )
    }
}

由于我无法在

useDrawerStatus

组件中使用

FloatingActionButton

，因为该组件不是

Drawer.Navigator

的子级（它不能容纳按钮本身，因为

Navigator

只能包含

Screen

，

 Group

和

Fragment

组件），我如何监听抽屉状态或以其他方式访问其当前打开状态？

Answer 1

使用 screenListeners 属性来监听

state

事件并检查

drawer

是否存在。像这样的东西：

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

  return (
    <NavigationContainer>
      <Drawer.Navigator 
        screenListeners={{
          state: (e) => {
            setIsDrawerOpen(e.data.state.history.some((it) => it.type === 'drawer'))
          }
        }}>
...
      </Drawer.Navigator>
      {!isDrawerOpen && <FloatingActionButton/>}
    </NavigationContainer>
  )
}