NavigationActions参考

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 as explained in the docs导入组件中的react-navigation-drawer

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，然后可以使用类似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道具传递到组件内部。例如，您可以运行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>
  )
};

Answer 2

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

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

2 个答案:

NavigationActions参考