打开导航抽屉时更改顶部栏的背景颜色

Question

我正在开发一个反应性项目。我的屏幕是白色的，但是导航抽屉从左到右是深灰色，我想让屏幕的顶部栏在打开抽屉时也显示深灰色，但是在关闭抽屉时仍然显示白色，如何实现那？

我将"@react-navigation/drawer": "^5.8.6"用于抽屉：

<Drawer.Navigator
    initialRouteName={InitialScreen}
    drawerContent={props => <MyDrawer {...props} />}
    screenOptions={{
        headerShown: true,
    }}>
    <Drawer.Screen name="main" component={MainScreen} />
</Drawer.Navigator>

如您所见，我为抽屉内容<MyDrawer />使用了自定义布局，在那里，我将背景设置为深灰色。

以下屏幕截图显示了打开抽屉时的外观。

Answer 1

我认为您可以使用此挂钩（Drawer hook）和本机<StatusBar />（React native status bar）对其进行轻松更改。像这样的东西：

const Drawer = createDrawerNavigator()

export function Screen(props) {
  const isDrawerOpen = useIsDrawerOpen()
  return (<>
    <StatusBar backgroundColor={isDrawerOpen ? colors.darkGrey : colors.white}/>
    {props.children}
  </>)
}

export function MainScreen(props) {
  return (
    <Screen>
      ...
    </Screen>
  )
}

export function test() {
  return (
    <>
      <Drawer.Navigator
        initialRouteName={InitialScreen}
        drawerContent={props => <MyDrawer {...props} />}>
        <Drawer.Screen name="main" component={MainScreen} />
      </Drawer.Navigator>
    </>
  )
}