反应导航-TabNavigator-> StackNavigator中的Header Menu图标的DrawerNavigator

Question

我想在所有屏幕中全局显示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);

Answer 1

您需要按照文档中的说明DrawerActions导入组件中的react-navigation-drawer

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

支持以下操作：

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

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

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

该react-navigationapi 没有提供更多信息，但您可以查阅apiNavigationActions参考以获取更多信息。

导航操作参考

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

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

您需要导入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 Mothilalnavigation所解释的那样，请确保您在组件内传递prop。例如，您可以运行 aconsole.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>
  )
};