React Navigation抽屉不显示当前页面的标题

Question

我创建了两个页面，分别是Home和Profile，并将这两个页面添加到createDrawerNavigation。然后将此抽屉导航添加到堆栈导航器。现在，当我尝试在当前页面的标题上显示标题时。我无法做到。

这是我的代码。

尝试了DefaultNavigationOptions并获得了navigator的props值，但这种方式不起作用。

const MenuStack = createDrawerNavigator(
  {
    HomePage: {
      screen: Home
    },
    ProfilePage: {
      screen: Profile
    }
  },
  {
    drawerWidth: Math.round(Dimensions.get("window").width) * 0.75,
    contentOptions: {
      activeTintColor: theme.colors.accent
    }
  }
);

const AppStack = createStackNavigator(
  {
    MenuStack: {
      screen: MenuStack
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.toggleDrawer()}
            name="bars"
            size={30}
          />
        ),
        headerRight: (
          <Icon
            style={{ paddingRight: 10 }}
            onPress={() => navigation.toggleDrawer()}
            name="search"
            size={30}
          />
        ),
        headerTitle: navigation.state.routeName,
        headerStyle: {
          backgroundColor: theme.colors.accent
        }
      };
    }
  }
);


export const createRootNavigator = (signedIn = false) => {
  return createAppContainer(
    createSwitchNavigator(
      {
        SignedIn: {
          screen: AppStack
        },
        SignedOut: {
          screen: WelcomeStack
        },
        SignInAndOut: {
          screen: AuthStack
        }
      },
      {
        initialRouteName: signedIn ? "SignedIn" : "SignedOut"
      }
    )
  );
};

我在createStackNavigator中添加了headerTitle属性，但我将“菜单集”作为每个页面的标题。标题上应为页面标题。

Answer 1

您有2个选项：

1。在每个屏幕中渲染您自己的标题组件

您可以在屏幕内部呈现标题，可以是自定义的标题，也可以是来自组件库（例如react native paper）的标题。

function Home() {
  return (
    <React.Fragment>
      <MyCustomHeader title="Home" />
      {{ /* screen content */ }}
    </React.Fragment>
  );
}

2。为每个需要标题的屏幕创建一个堆栈导航器

const MenuStack = createDrawerNavigator({
  HomePage: {
    screen: createStackNavigator({ Home })
  },
  ProfilePage: {
    screen: createStackNavigator({ Profile })
  }
});

请记住，虽然这需要较少的代码，但性能也较低。