7

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

2 回答 2

3

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

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

支持以下操作：

  • openDrawer- 打开抽屉
  • closeDrawer- 关闭抽屉
  • toggleDrawer- 切换状态，即。从关闭切换到打开，反之亦然
import { DrawerActions } from 'react-navigation-drawer';

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

该react-navigationapi 不提供更多信息，但您可以查阅api 参考以NavigationActions获取更多信息。

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在组件内传递道具。例如，您可以运行 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>
  )
};
于 2019-05-14T14:15:09.603 回答
0

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

于 2019-05-15T09:17:38.620 回答