React Navigation（本机）：自定义 header

Question

react-navigation 的抽屉 组件没有覆盖整个应用程序，我遇到了问题。我真的很挣扎，因为我是 React Native 的新手，无法找到“干净的方式”来做到这一点

这是一个例子：

https://snack.expo.io/ZZqxmOQMw

当您按下“切换抽屉”时，我希望它覆盖整个应用程序，包括 header，但它只覆盖主要内容。在他们的例子中，抽屉总是只在没有内容或 header.

的情况下工作

谢谢！

Answer 1

我认为你应该将 Header 组件移动到每个屏幕或使用抽屉内的堆栈来创建 header

Answer 2

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

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