Question

我试图通过设置选项而未进行任何更改来在React Navigation v5中设置标题

<Drawer.Navigator
  initialRouteName='...'
>
  <Drawer.Screen
    name='...'
    component={Component}
    options={{ title: 'My home' }}
  />
</Drawer.Navigator>

有什么办法可以将我的反应导航标题放置在抽屉中？

Answer 1

更新：抽屉导航器的最新版本现在默认显示标题（可以用headerShown:: false隐藏）

抽屉导航器不提供标题。

如果要在抽屉屏幕中显示标题，则有两个选项：

提供您自己的标头组件。您可以使用react-native-paper
在要显示标题的每个抽屉屏幕中嵌套一个堆栈导航器。

Answer 2

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

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>

Answer 3

这是带有反应导航5的简单示例：

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

您可以在docs和you can try this example on Snack的嵌套导航器中找到导航到屏幕的信息

设置抽屉导航标题

3 个答案: