如何在反应原生导航中使标题出现在每个屏幕上答案

【问题标题】：How to make header appear on every screen in react native navigation如何在反应原生导航中使标题出现在每个屏幕上
【发布时间】：2020-05-11 23:58:32
【问题描述】：

默认情况下，标题似乎仅适用于堆栈导航器。我想知道如何显示从导航器打开的任何屏幕的标题？

我的主屏幕代码

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

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

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

你可以去React-native-elements-header看看，

我想这就是你要找的东西。

【讨论】：

【解决方案2】：

我一直在寻找解决方案，但是没有找到任何使用自定义标头自动包装每个组件的好方法。所以我最终创建了 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>

这也应该显示任何嵌套组件的标题。如果您使用 StackNavigator，您需要将 options={{headerShown: false}} 传递给您的 Screen.options

【讨论】：