首页 文章

React - 本机导航抽屉导航嵌套导航

提问于
浏览 1245 次
4

目前在我正在构建的react-native应用程序中，我有一个包含两个屏幕的Drawer Navigator . 对于导航，我正在使用react-navigation . https://reactnavigation.org/docs/intro/

代码如下，

import { DrawerNavigator } from 'react-navigation'
export  default drawernav = DrawerNavigator(
     {
        Login: {Screen: Login},
        Main : {Screen: Main }
     }
)

虽然Login位于Drawer Navigator中，但我想要它，以便Login屏幕没有抽屉导航功能，但主屏幕使用login和main作为抽屉导航器中的两个选项 . 但是，现在登录屏幕也有抽屉导航器 . 有没有办法让登录抽屉导航功能消失？

react-native react-navigation create-react-native-app

3 回答

  • 0

    请参考以下帖子，这是非常有帮助的 . 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;
    回复于
  • 1

    由于您不想在登录屏幕中使用抽屉，因此请使用此流程

    import { DrawerNavigator, createStackNavigator } from 'react-navigation'
const drawernav = DrawerNavigator(
     {
        Main : {Screen: Main }
     }
);

const stack = createStackNavigator(
    {
      Login: {Screen: Login},
      drawer: {screen: drawernav},
    }
);

export default stack;

    并且在将来你想要添加屏幕然后如果屏幕需要抽屉那么那个屏幕必须放在抽屉导航器中并且不需要抽屉的屏幕应该放在堆栈导航器中 .

    回复于
  • 0

    您需要更改导航结构 . 在根目录应该是 StackNavigator ，它将包含 LoginScreen 和 DrawerNavigator . DrawerNavigator 中的屏幕可能是 StackNavigator s . 那些 StackNavigator 将包含您的代码的屏幕组件 .

    回复于

相关问题