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

Question

我正在开发一个 react-native 项目。我的屏幕是白色的，但是左侧的导航抽屉是深灰色的，我想让屏幕的顶部栏部分在抽屉打开时也显示为深灰色，但在抽屉关闭时仍显示为白色，如何实现那个？

我在抽屉里使用"@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) 和 react-native <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>
    </>
  )
}