反应导航本机：自定义标头

问题描述

反应导航的抽屉组件没有覆盖整个应用程序，我遇到了问题。我真的很挣扎，因为我是React Native的新手，无法弄清楚这样做的“干净方法”

这是一个例子：

https://snack.expo.io/ZZqxmOQMw

当您按下“切换抽屉”时，我希望它可以覆盖整个应用程序，包括标题，但仅覆盖主要内容。在他们的示例中，抽屉始终只能使用任何内容或标题。

谢谢！

解决方法

我认为您应该将Header组件移至每个屏幕，或使用抽屉中的堆栈创建页眉

,

我认为这对您来说是一个简单的解决方案。

function withHeader(Component) {
    return function(props) {
        return (
            <>
                <Header />
                <Component {...props} />
            </>
        )
    }
}

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={withHeader(Feed)} />
      <Drawer.Screen name="Notifications" component={withHeader(Notifications)} />
    </Drawer.Navigator>
  );
}

function Header() {
  return <View style={{height: '50px',backgroundColor: 'red'}}>
    <Text>My custom header!</Text>
  </View>
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}