【问题标题】：react navigation - DrawerNavigator for Header Menu icon inside TabNavigator-> StackNavigator反应导航 - TabNavigator-> StackNavigator 中标题菜单图标的 DrawerNavigator
【发布时间】：2019-09-27 03:15:24
【问题描述】：

我想在所有屏幕中全局显示 HeaderLeft 菜单图标。当我点击菜单图标时，我需要显示抽屉菜单。我使用“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);

【问题讨论】：

您将“导航”直接发送到 MenuButton。尝试用这个“navigation.openDrawer()”替换这个“props.navigation.openDrawer()”
看不到在您的主 AppNavigator 中声明的 MyDrawerNavigator。尝试将您的抽屉导航器作为您的应用容器。

标签： react-native react-navigation react-navigation-drawer

【解决方案1】：

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

DrawerActions 是一个对象，其中包含用于生成特定于基于抽屉的导航器的操作的方法。它的方法扩展了 NavigationActions 中可用的操作。

支持以下操作：

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

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

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

react-navigation api 没有提供更多信息，但您可以咨询the NavigationActions api reference 了解更多信息。

NavigationActions 参考

所有NavigationActions都返回一个可以使用navigation.dispatch()方法发送到路由器的对象。

请注意，如果您想调度 react-navigation 操作，您应该使用此库中提供的操作创建器。

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

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 属性。例如，您可以运行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>
  )
};

【讨论】：

在 MenuButton 内部，'props' 没有任何抽屉方法。参考下面的 JSON
{"navigation":{"state":{"routeName":"Home","key":"id-1559109520033-0"},"actions":{}}}跨度>

【解决方案2】：

首先，只需控制台菜单按钮中的道具并检查您是否获得 openDrawer 或 closeDrawer 或您正在寻找的任何其他方法，然后您可以调用它。

【讨论】：