目前在我正在构建的react-native应用程序中,我有一个包含两个屏幕的Drawer Navigator. 对于导航,我正在使用react-navigation. https://reactnavigation.org/docs/intro/ 代码如下, import { DrawerNavigator } from 'r
对于导航,我正在使用react-navigation.
https://reactnavigation.org/docs/intro/
代码如下,
import { DrawerNavigator } from 'react-navigation' export default drawernav = DrawerNavigator( { Login: {Screen: Login}, Main : {Screen: Main } } )
虽然Login在抽屉导航器中,但我想要它,以便登录屏幕没有抽屉导航功能,但主屏幕使用login和main作为抽屉导航器中的两个选项.
但是,现在登录屏幕也有抽屉导航器.有没有办法让登录抽屉导航功能消失?
https://github.com/react-navigation/react-navigation/issues/131.
建议采用多种方法.
kyaroru提供了一个完整的工作示例如下:
https://github.com/kyaroru/ReactNavDrawer.
以下是一个更简单的示例:
app.js
import React from 'react'; import { createStackNavigator , createDrawerNavigator } from 'react-navigation'; import LoginScreen from './LoginScreen'; import SignupScreen from './SignupScreen'; import HomeScreen from './HomeScreen'; import DrawerButton from './DrawerButton'; import SettingScreen from './SettingScreen'; const StackNavigator = createStackNavigator ({ Login: { screen: LoginScreen, }, Signup: { screen: SignupScreen, }, Home: { screen: HomeScreen, }, Sitting: { screen: SettingScreen, }, }, { navigationOptions: ({navigation}) => ({ headerLeft: <DrawerButton navigation={navigation} />, }), } ); const DrawerNavigator = createDrawerNavigator({ Menu: { screen: StackNavigator, }, Signup: { screen: SignupScreen, }, Sitting: { screen: SettingScreen, }, }); export default DrawerNavigator;
DrawerButton.js
import React from 'react'; import { TouchableOpacity, Platform } from 'react-native'; import Ionicons from 'react-native-vector-icons/Ionicons'; import PropTypes from 'prop-types'; const DrawerButton = ({ navigation }) => ( <TouchableOpacity onPress={() => navigation.openDrawer()} > <Ionicons name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'} size={28} /> </TouchableOpacity> ); DrawerButton.propTypes = { navigation: PropTypes.object.isRequired, }; export default DrawerButton;