Question

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

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

如何添加抽屉式导航器React-Navigation v4

1 个答案: