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

Question

我创建了两个页面，分别是“主页”和“个人资料”，并将这两个页面添加到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 })
  }
});

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