时间戳

首页 > 解决方案 > 隐藏抽屉导航标题

react-native - 隐藏抽屉导航标题

问题描述

我试图在反应本机应用程序上隐藏抽屉页眉。目前，使用react-navigation ^1.5.12. * 我想删除灰色标题

在此处输入图像描述

我的代码看起来像这样。路由器.js

const HomeStack = DrawerNavigator({
  Home: { screen: Home },
  Message: { screen: Message },
  History: { screen: History },
  Settings: { screen: Settings },
}, {
  contentComponent: DrawerMenu,
  drawerWidth: 240,
  // Explicitly set the default screen to use
  initialRouteName: 'Home',
});

export default const MainStack = StackNavigator({
  LoggedInHome: { screen: HomeStack },
  Notification: { screen: Notification },
}, {
  // Explicitly set the default screen to use
  initialRouteName: 'Home',
});

我header: null也在每个屏幕上添加了。

抽屉菜单.js

export default class DrawerMenu extends React.Component {
  static navigationOptions = {
    header: null
  }

  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={this.navigateToScreen('Home', { isStatusBarHidden: false })}
        >
          <Text>Home</Text>
        </TouchableOpacity>
...

标签： react-nativereact-navigation

解决方案

您应该在抽屉的实例化中设置导航选项：

const HomeStack = DrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: { header: null }
  },
  ...

推荐阅读