如何使 header 出现在反应本机导航的每个屏幕上

Question

看起来 header 默认情况下仅适用于堆栈导航器。我想知道 如何为从导航器打开的任何屏幕显示 headers？

我的主屏幕代码

const createHomeStack = () =>
<Stack.Navigator>
 <Stack.Screen
  name='Feed'
  component={Feed}
 />
 <Stack.Screen name='Details' component={Details} />
 </Stack.Navigator>

const createBottomTabs = () =>
 <MaterialBottomTabs.Navigator>
  <MaterialBottomTabs.Screen name='Decks' component={Decks} />
  <MaterialBottomTabs.Screen name='Study' component={Study} />
 </MaterialBottomTabs.Navigator >

export default function App() {


 return (
 <Provider store={store}>
  <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name='Home' children={createHomeStack}
          options={{
            title: 'My home',
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />
        <Drawer.Screen name='Translate' component={TranslateScreen} />
        <Drawer.Screen name='History' component={History} />
        <Drawer.Screen name='Study' component={createBottomTabs} />
      </Drawer.Navigator>
  </NavigationContainer>
  </Provider>
 );
 }

我想要的东西看起来像 header 的屏幕截图，每个屏幕上都有打开或关闭的导航器。

Answer 1

你可以看看React-native-elements-header,

我想这就是您要找的。

Answer 2

我一直在寻找解决方案，但没有找到任何好的方法来使用自定义 header 自动包装每个组件。所以我最终创建了 HOC 组件并为每个屏幕包装了每个组件。

import React, {Fragment} from 'react';

const NavHeader = props => {
 // ... NavHeader code goes here 
};

export const withHeader = Component => {
  return props => {
    return (
      <Fragment>
        <NavHeader {...props} />
        <Component {...props} />
      </Fragment>
    );
  };
};

然后在你的抽屉里做：

<Drawer.Navigator>
    <Drawer.Screen
      name={ROUTES.DASHBOARD}
      component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
    />
</Drawer.Navigator>

对于任何嵌套组件，这也应该表明 header。如果您使用 StackNavigator，您需要将 options={{headerShown: false}} 传递给您的 Screen.options

如何使 header 出现在反应本机导航的每个屏幕上

How to make header appear on every screen in react native navigation

react-native

react-native-navigation