时间戳

首页 > 解决方案 > React Navigation 抽屉不显示当前页面的标题

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

问题描述

我创建了 2 个页面，即 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 属性，但我将“menustack”作为每个页面的标题。应为页眉上的页面标题。

标签： react-nativereact-navigation

解决方案

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

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

推荐阅读