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

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 />，在那里，我将背景设置为深灰色。

以下截图展示了抽屉打开时的外观。

- Leem.fin

---

当抽屉打开时，您也可以隐藏状态栏。或者这对您来说不是一个选项？ - 5eb

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>
    </>
  )
}

- Klo

---

但是这段代码应该放在哪里呢？我不想在每个屏幕组件中复制粘贴<StatusBar ...>代码。我尝试了你的代码，但是出现了错误Couldn't find a drawer. Is your component inside a drawer navigator?，显然你的代码在抽屉导航器之外。 - Leem.fin

我也尝试将状态栏的代码放在 MyDrawer 组件中，但对状态栏没有任何影响。 - Leem.fin

没有考虑到这个问题。你可以尝试将钩子和状态栏包装在某种屏幕组件中，然后在不同的屏幕中使用它？ - Klo

我已经更新了我的答案，加入了我的新想法。 - Klo

谢谢，但是就像我在之前的评论中所说的那样，我不想将同样的代码复制粘贴到每个屏幕上，我正在寻找比那更好的解决方案。 - Leem.fin

你不需要复制整个代码，只需使用<Screen></Screen>封装不同的屏幕即可，这就是infinitered团队正在做的事情：Ignite bowser boilerplate。 - Klo