![](/img/trans.png)
[英]Problems in DrawerNavigator in React-Native with react-navigation
[英]Hide header inside DrawerNavigator (react-navigation)
惠..
我目前正在玩反应导航,试图解决抽屉打开时标题没有隐藏的问题...
我希望任何人都可以分享如何解决这个错误的标题。.在我将我的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 } })
先感谢您!
您可以隐藏标题,例如:
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 }
})
我遇到了同样的问题(TabNav嵌套在DrawerNav中),发现了一个我想分享的超级简单的修复程序! 这个问题讨论了这里 ,在回购的react-navigation
。 我实施的修复(要隐藏的屏幕上):
MAIN: {
screen: MainTabs,
navigationOptions: {
drawerLabel: () => null // to hide this header
},
},
版本略有不同:
static navigationOptions = {
drawerLabel: () => null
}
希望这可以帮助!
在DrawerNavigator中使用StackNavigator并将headerMode: 'none'
为root 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',
});
我找到了方法,我只需要做另一种方法即可。将DrawerNavigator设置为根导航器,然后将StackNavigator放入其中。然后打开抽屉时将没有标题
我也在解决这个问题,发现StackNavigator必须嵌套在Drawer一个内部,但是与此解决方案有很多问题,例如同步抽屉和卡片堆栈中的活动菜单状态。
// 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' }
}
})
我也遇到了同样的问题,并通过在主StackNavigator中添加“ headerMode”:none来解决。
例:
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',
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.