react-native - react 导航 - TabNavigator-> StackNavigator 中标题菜单图标的 DrawerNavigator

Question

我想在所有屏幕中全局显示 HeaderLeft Menu 图标。当我点击菜单图标时，我需要显示抽屉菜单。我使用“OpenDrawer”、“CloseDrawer”方法打开/关闭抽屉菜单。

但我总是得到“undefined is not a function (evaluating 'props.navigation.openDrawer()')" 。我也尝试了以下

props.navigation.dispatch(DrawerActions.openDrawer())
props.navigation.navigate(openDrawer())

但以上都没有奏效。这是我的部分代码

const MenuButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => { props.navigation.dispatch(DrawerActions.openDrawer())} }>
        <Text>Menu</Text>
      </TouchableOpacity>
    </View>
  )
};

const MyDrawerNavigator = createDrawerNavigator(
  {
    Wishist: {
      screen: wishlist
    },
  },
  {
    contentComponent: SideMenuScreen,
    drawerWidth: 200,
  }
);

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: createStackNavigator({
      Home: {
        screen: Home
      },
      Contact: {
        screen: Contact
      }
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        headerStyle: {
          backgroundColor: 'white',
          borderWidth:0,
          borderBottomWidth:0
        },
        headerTitle: headerTitleNavigationOptions('HOME'),
        headerLeft: <MenuButton navigation={navigation}/>,
        headerRight: headerRightNavigatorOptions(navigation)
      })
    }),
    navigationOptions: ({ navigation }) => ({
      headerStyle: {
          backgroundColor: 'white',
          borderWidth:0,
          borderBottomWidth:0
      },
    }),
  }},
  {
    tabBarOptions: {
      showLabel: false,
      style: {
        backgroundColor: 'white',
        borderTopWidth:1
      }
    },
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

const App = createAppContainer(AppNavigator);

Answer 1

您需要导入 DrawerActions在您的组件中来自 react-navigation-drawer as explained in the docs

DrawerActions is an object containing methods for generating actions specific to drawer-based navigators. Its methods expand upon the actions available in NavigationActions.

The following actions are supported:

openDrawer - 打开抽屉

closeDrawer - 关闭抽屉

toggleDrawer - 切换状态，即。从关闭切换到打开和
反之亦然

import { DrawerActions } from 'react-navigation-drawer';

this.props.navigation.dispatch(DrawerActions.openDrawer())

react-navigation api 不提供更多信息，但您可以咨询 the NavigationActions api reference想要查询更多的信息。
导航操作引用

All NavigationActions return an object that can be sent to the router using navigation.dispatch() method.

Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.

您需要导入 NavigationActions在您的组件中，然后您可以 dispatch您的操作类似于 this.props.navigation.dispatch(navigateAction);

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});

this.props.navigation.dispatch(navigateAction);

也如 Ashwin Mothilal 中所述，请确保您通过了 navigation组件内的 Prop 。例如，您可以运行 console.warn(props)并立即在模拟器上看到结果。
这是您的组件:

import { DrawerActions } from 'react-navigation-drawer';

const MenuButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => {
          console.warn(props);
          props.navigation.dispatch(DrawerActions.openDrawer());
      }}>
        <Text>Menu</Text>
      </TouchableOpacity>
    </View>
  )
};