隐藏DrawerNavigator中的标题(react-navigation)

j7dteeu8  于 6个月前  发布在  React
关注(0)|答案(7)|浏览(64)

惠...
我目前玩周围的React导航,并试图解决问题,头没有隐藏时,抽屉打开.
x1c 0d1x的数据
我希望任何人都可以分享如何解决这个错误的头。下面我附上了我的代码集成DrawerNavigator内StackNavigator。

const Home = DrawerNavigator({
  HomeMenu: { screen: HomeMenu },
  Messages: { screen: Messages },
  Notifications: { screen: Notifications },
  Badges: { screen: Badges },
  Leaderboard: { screen: Leaderboard },
  Profile: { screen: Profile },
  Logout: { screen: Logout }
});

const MainActivity = StackNavigator({
  Home: { screen: Home }
})

字符串
在此先谢谢您!

jdg4fx2g

jdg4fx2g1#

您可以隐藏标题,如:-

const Home = DrawerNavigator({
  HomeMenu: { screen: HomeMenu,
    navigationOptions: {
          header:false, //hide header if not needed so whole screen slide  

    },
},
  Messages: { screen: Messages },
  Notifications: { screen: Notifications },
  Badges: { screen: Badges },
  Leaderboard: { screen: Leaderboard },
  Profile: { screen: Profile },
  Logout: { screen: Logout }
});

const MainActivity = StackNavigator({
  Home: { screen: Home }
})

字符串

qncylg1j

qncylg1j2#

DrawerNavigator中使用StackNavigator,并将headerMode: 'none'设置为根StackNavigator

const MenuStackNavigator = StackNavigator({
  Dashboard: { 
    screen: Dashboard, 
    navigationOptions: {
      title: 'Dashboard',
    }
  },
});
const PagesStackNavigator = StackNavigator({...});

const DrawerNavigator = DrawerNavigator({
  MenuStack: { 
    screen: MenuStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'MenuStackNavigator',
      })
    },
  },
  Pages: { 
    screen: PagesStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'PagesStackNavigator',
      })
    },
  }
});

const AppNavigator = StackNavigator({
  Drawer: { screen: DrawerNavigator },
}, {
  headerMode: 'none',
});

字符串

2sbarzqh

2sbarzqh3#

我也遇到了同样的问题(TabNav嵌套在DrawerNav中),并找到了一个我想分享的 * 超级 * 简单的修复方法!这个问题在react-navigation的repo中讨论here。我实现的修复方法(在屏幕上你想隐藏):

MAIN: {
  screen: MainTabs,
  navigationOptions: {
    drawerLabel: () => null // to hide this header
},

字符串
},
略有不同的版本:

static navigationOptions = {
drawerLabel: () => null


}
希望这对你有帮助!

lc8prwob

lc8prwob4#

我找到了方法,我只需要做其他的方法..使DrawerNavigator作为根导航器,并把StackNavigator里面..然后将没有标题时,打开抽屉

ig9co6j1

ig9co6j15#

我也在解决这个问题,发现StackNavigator必须嵌套在抽屉里,但是这个解决方案有很多问题,比如同步抽屉和卡片堆栈内的活动菜单状态。

// Manifest of possible screens

const MenuButton = ({ navigation }) => (
    <View>
        <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
            <Icon name="bars" style={{color: 'white', padding: 10, marginLeft:10, fontSize: 20}}/>
        </TouchableOpacity>
    </View>
);

const Nav = StackNavigator({
  StoriesScreen: {
    screen: StoriesScreen,
    navigationOptions: { title: 'Stories' }
  },
  LaunchScreen: { screen: LaunchScreen },
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: { title: 'Login' }
  }
}, {
  navigationOptions: {
    header: navigation => ({
      style: styles.header,
      left: <MenuButton navigation={navigation} />,
    }),
  }
})

const PrimaryNav = DrawerNavigator({
  StoriesScreen: {
    screen: Nav,
    navigationOptions: { title: 'Stories' }
  },
  LaunchScreen: { screen: LaunchScreen },
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: { title: 'Login' }
  }
})

字符串

js81xvg6

js81xvg66#

我也有同样的问题,并通过添加“headerMode”解决:在主StackNavigator中没有。
范例:

const AppMainStack = DrawerNavigator({
  ActivitiesScreen: {screen: ActivitiesScreen},
}, {
  drawerPosition: 'right',
});

const AppNavigator = StackNavigator({
  StartScreen: {screen: StartScreen},
  EnterCodeScreen: {screen: EnterCodeScreen},
  CreateAccountScreen: {screen: CreateAccountScreen},
  ProfileSetupScreen: {screen: ProfileSetupScreen},
  SignInScreen: {screen: AppMainStack},
}, {
  headerMode: 'none',
});

字符串

idv4meu8

idv4meu87#

使用screenOptions并设置一个“null”头函数,如下所示:

<Drawer.Navigator
        screenOptions={{ header: () => <View /> }}
        initialRouteName="HomeStack"
    >
        <Drawer.Screen name="HomeStack" component={HomeStack} />
    </Drawer.Navigator>

字符串

相关问题