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

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

我想你可以使用这个钩子(Hook) ( 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>
    </>
  )
}