Как добавить ящик навигатора React-Navigation v4

Question

У меня есть этот код для создания ящика навигатора. Но я не могу открыть свой ящик через слайд слева направо. Может кто-нибудь, пожалуйста, помогите мне решить мою проблему. Я новичок в реакции-родной. Я использую реагирующую навигацию v4 и реагирующую навигационную панель для навигатора.

const EMBotomTabScreen = createDrawerNavigator ({
  SUMMARY: {
    screen : EMNavigator,
    navigationOptions :{
      animationEnabled : 'true',
      // headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
      swipeEnabled: true,
      tabBarOptions: {
        activeTintColor: '#369841',
        //activeBackgroundColor : '#f2f2f2',
        inactiveTintColor : 'gray',
        inactiveBackgroundColor : '#adc1b8',
        borderRightWidth:2,
        borderRightColor:'blue',
        labelStyle: {
          fontSize: 13,
        },
        style: {
          backgroundColor: '#f2f2f2',
          // borderRightWidth:2,
          // borderRightColor:'blue'
        },
        indicatorStyle: {
            backgroundColor: 'red',
        },
      },

      tabStyle: {
        backgroundColor: 'green',
        borderRightWidth:2,
        borderRightColor:'blue'
      },
      indicatorStyle : {
        backgroundColor : 'red'
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = `ios-desktop`;
        return <Image source={require('../assets/aaaaa.png')} size={27} color={tintColor} />;
    },
    }
  },
  DEMAND: {
    screen : EMDemandNavigator,
    navigationOptions : {
      tabBarOptions: {
        activeTintColor: '#369841',
       // activeBackgroundColor : '#f2f2f2',
        inactiveTintColor : 'gray',
        inactiveBackgroundColor : '#adc1b8',
        labelStyle: {
          fontSize: 13,
        },
        style: {
          backgroundColor: '#f2f2f2',
        },
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = `ios-cloud`;
        return <Image source={require('../assets/aaaaaaa.png')} size={27} color={tintColor} />;
    },
    }
  },
  ALARM: {
    screen : EMAlarmNavigator,
    navigationOptions : {
      animationEnabled : 'true',
      swipeEnabled: true,
      tabBarOptions: {
        activeTintColor: '#369841',
        //activeBackgroundColor : '#f2f2f2',
        inactiveTintColor : 'gray',
        inactiveBackgroundColor : '#adc1b8',
        borderRightWidth:2,
        borderRightColor:'blue',
        labelStyle: {
          fontSize: 13,
        },
        style: {
          backgroundColor: '#f2f2f2',
          // borderRightWidth:2,
          // borderRightColor:'blue'
        },
        indicatorStyle: {
            backgroundColor: 'red',
        },
      },

      tabStyle: {
        backgroundColor: 'green',
        borderRightWidth:2,
        borderRightColor:'blue'
      },
      indicatorStyle : {
        backgroundColor : 'red'
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const iconName = `bell-o`;
        return <Icons name={iconName} size={27} color={tintColor} />;
    },
    }
  }

Answer 1

Вы можете получить представление из приведенного ниже кода.

import Splash from '../Splash/Splash';
import Home from '../screens/Home';
import DrawerScreen from '../screens/DrawerScreen'
//And many more 
import {createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator} from 'react-navigation';

const AppStack = createDrawerNavigator({
        Home:Home,
    },{
    contentComponent: DrawerScreen,
        defaultNavigationOptions: { 
            drawerWidth: Dimensions.get('window').width - 120,
          },
 });

const AppNavigator = createStackNavigator({
    Splash:Splash,
     Login:Login,
     SignUp:SignUp },,{
        defaultNavigationOptions: { 
            header: null,
            gesturesEnabled: false
          },
          initialRouteName: "Splash");
const AppContainer = createAppContainer(AppNavigator);

Всякий раз, когда вы хотите открыть ящик, как при щелчке на значке ящика. затем добавьте эти строки в определение onPress.

this.props.navigation.openDrawer();