Question

当我单击左侧图标时，我想打开抽屉；这是我的代码：

const stackNav = StackNavigator({
  Main : {
    screen: MainScreen,
    navigationOptions: ({navigation}) => ({
      title: "Easy Billing",
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
          <IOSIcon name="ios-menu" size={30} onPress={() => navigation.navigate("DrawerOpen")} />
        </TouchableOpacity>
      ),
      headerStyle: { } 
    })
  }
});

Answer 1

打开，关闭和切换抽屉的默认值为：

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();

您可以在按钮的onPress属性中使用它们。像这样 <Button onPress={() => { this.props.navigation.openDrawer(); }} />

Answer 2

尝试：import { DrawerActions, createDrawerNavigator } from 'react-navigation';

然后：

const stackNav = createDrawerNavigator({
  Main : {
    screen: MainScreen,
    navigationOptions: ({navigation}) => ({
      title: "Easy Billing",
      headerLeft: (
        <TouchableOpacity onPress={() => { navigation.dispatch(DrawerActions.openDrawer()); }}>
          <IOSIcon name="ios-menu" size={30} onPress={() => { navigation.dispatch(DrawerActions.openDrawer()); }} />
        </TouchableOpacity>
      ),
      headerStyle: { } 
    })
  }
});

使用stackNavigator时无法显示抽屉；这就是为什么我使用createDawerNavigator变量的原因。请注意，DrawerNavigator和StackNavigator已过时，请改用createDrawerNavigator和createStackNavigator。

希望我的回答有帮助！

Stack Navigator抽屉图标单击未打开的抽屉，但在滑动时打开

2 个答案: