如何添加抽屉式导航器

Question

我具有用于创建抽屉导航器的代码。但是我无法通过左右滑动打开抽屉。谁能帮我解决我的问题。我是本机的新手。我在抽屉式导航器中使用react-navigation v4和react-navigation-drawer。

const EMBotomTabScreen = createDrawerNavigator（{摘要：{屏幕：EMNavigator，navigationOptions：{animationEnabled：'true'，// headerLeft：，swipeEnabled：是，tabBarOptions：{activeTintColor：'＃369841'，// activeBackgroundColor：'＃f2f2f2'，inactiveTintColor：'灰色'，inactiveBackgroundColor：'＃adc1b8'，borderRightWidth：2，borderRightColor：'蓝色'，labelStyle：{字号：13}，风格：{backgroundColor：'＃f2f2f2'，// borderRightWidth：2，// borderRightColor：'blue'}，indicatorStyle：{backgroundColor：“红色”，}，}，

  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} />;
},
}

}，需求：{屏幕：EMDemandNavigator，navigationOptions：{tabBarOptions：{activeTintColor：'＃369841'，// activeBackgroundColor：'＃f2f2f2'，inactiveTintColor：'灰色'，inactiveBackgroundColor：'＃adc1b8'，labelStyle：{字号：13}，风格：{backgroundColor：'＃f2f2f2'，}，}，tabBarIcon：（{{focus，tintColor}）=> {const iconName = ios-cloud;回报;}，}}，警报：{屏幕：EMAlarmNavigator，navigationOptions：{animationEnabled：'true'，swipeEnabled：是，tabBarOptions：{activeTintColor：'＃369841'，// activeBackgroundColor：'＃f2f2f2'，inactiveTintColor：'灰色'，inactiveBackgroundColor：'＃adc1b8'，borderRightWidth：2，borderRightColor：'蓝色'，labelStyle：{字号：13}，风格：{backgroundColor：'＃f2f2f2'，// borderRightWidth：2，// borderRightColor：'blue'}，indicatorStyle：{backgroundColor：“红色”，}，}，

  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 {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);

export default AppContainer;

[只要您想打开抽屉，就像单击抽屉图标一样。然后将这些行添加到onPress定义中。

this.props.navigation.openDrawer();