如何在本机反应中使用抽屉导航器？答案

【问题标题】：How to use drawer navigator in react native?如何在本机反应中使用抽屉导航器？
【发布时间】：2019-11-22 20:03:15
【问题描述】：

我正在尝试在我的 react 本机应用程序中实现抽屉导航器。我在应该打开抽屉的组件中使用了 openDrawer() 函数。但是，在单击组件时，抽屉会直接在抽屉内启动屏幕，而不是简单地打开抽屉。我使用导航器的方式是错误的吗？任何帮助将不胜感激。

Navigator.js

import React from 'react';
import { createAppContainer,createSwitchNavigator} from 'react-navigation';
import {createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import {View,Platform,StatusBar} from 'react-native';
import LoginForm from './Components/LoginForm';
import TheatreList from './Components/TheatreList';
import Menu from './Components/Menu';
import EmployeeEdit from './Components/EmployeeEdit';
import CartScreen from './Components/CartScreen';
import Screen from './Components/Screen';
import ShoppingCartIcon from './Components/ShoppingCartIcon';
import PaymentScreen from './Components/PaymentScreen';
import Screen1 from './Screen/Screen1';
import Screen2 from './Screen/Screen2';

import * as Expo from 'expo';


const Navigator = createStackNavigator({

       TheatreList:{
        screen:TheatreList
    } , 

       Login: {
      screen:LoginForm
    },


    Menu: {
        screen:Menu
    },
    Cart: {
        screen:CartScreen
    },
    PaymentScreen:{
      screen:PaymentScreen
    }, 
  },
{
    headerMode: 'none',
      navigationOptions: {
        header: null,
    },
},
{
    initialRouteName: 'TheatreList'
  }
  );

const AppDrawerNavigator=createDrawerNavigator(
{
  Navigator,
    Screen1:{
      screen:Screen1
    },
    Screen2:{
      screen:Screen2
    }
});

const RootNav=createSwitchNavigator({

  Navigator,
  AppDrawerNavigator

});

export default createAppContainer(RootNav);

ProfileIcon.js

import React, { Component } from 'react';
import { View, Text, Picker,Button } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/Entypo';
import { Actions } from 'react-native-router-flux';
import { DrawerActions } from 'react-navigation-drawer';

const ProfileIcon = (props) => (
  <View style ={{
        position:'absolute',
        top:0,
        left:0,
        right:5,
       // padding:7,
        width: 40,
        height: 40,
        borderRadius: 40/2,
        border: '1px solid #c45653',
        justifyContent: 'center',
        marginLeft: 15,padding:7}}>
     <Icon name="menu" onPress={() => props.navi.dispatch(DrawerActions.openDrawer())}  style ={{fontSize:50, position:'absolute', top:0, right:0,width:40, color:'#fe003a'}} />
</View>
)

export default ProfileIcon;

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

您需要制作嵌套的堆栈导航器。在 AppDrawerNavigator 中，调用您的 Navigator 堆栈

【讨论】：

【解决方案2】：

试试这个

const RootNavigator = createStackNavigator({
DrawerMenu: { screen: DrawerMenu },
Home: { screen: Home },
},
 {
    initialRouteName: 'Home',
    navigationOptions: ({ navigation }) => ({
    })
 });

 const Drawer = createDrawerNavigator({
 RootNavigator: {
    screen: RootNavigator, //rootNavigator
    navigationOptions: { title: 'titleHere' },
 },
 },
  {
    initialRouteName: 'RootNavigator',
    drawerPosition: 'Left',
    backBehavior: 'none',
    contentComponent: props => <DrawerMenu {...props} />,
    drawerOpenRoute: 'DrawerOpen',
},
);

const LoginNavigator = createStackNavigator({
   Login: {
    screen: Login,
     navigationOptions: {
        drawerLockMode: 'locked-closed',
        headerStyle: { },    
        headerTitleStyle: {  },
        title: 'Title'
    }
  },
})

export default createSwitchNavigator({
   AuthLoading: AuthLoadingScreen,  //SplashScreen
   LoginNavigator: LoginNavigator,
   Drawer: Drawer,
},
{
    initialRouteName: 'AuthLoading',
})

【讨论】：