无法打开抽屉反应原生

Question

我创建了 createDrawerNavigator。但是当调用“props.navigation.dispatch(DrawerActions.openDrawer())”时什么也没显示。这是我的代码。

MenuNavigator.js

import { createDrawerNavigator } from "react-navigation";
import Login from "../screens/auth/Login"
import ForgotPassword from "../screens/auth/ForgotPassword"
import SignUp from "../screens/auth/SignUp";


const MenuNavigator = createDrawerNavigator({
  //Drawer Optons and indexing
  ForgotPassword: ForgotPassword,
  SignUp: SignUp,
},
  {
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);
export default MenuNavigator;

AppNavigator

import { createStackNavigator, createAppContainer } from "react-navigation";
import StackNavigatorMain from "./StackNavigatorMain"
import MenuNavigator from "./MenuNavigator"


const AppNavigator =  createStackNavigator(
  {
    StackNavigatorMain: StackNavigatorMain,
    MenuNavigator: MenuNavigator
  },
  {
    headerMode: "none",
    navigationOptions: {
      headerVisible: false
    },
    initialRouteName: "StackNavigatorMain"
  }
);

export default createAppContainer(AppNavigator);

调用 openDrawer

onLoginClicked = () => {
    props.navigation.dispatch(DrawerActions.openDrawer());
}

Answer 1

首先从顶级组件中获取导航器的引用，如下所示：

const AppContainer = createAppContainer(AppNavigator);

return <AppContainer ref={navigatorRef => Navigation.setTopLevelNavigator(navigatorRef)} />;

在Navigation.js 文件中，您需要为导航器参考设置一个全局变量：

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

然后像这样在那里创建函数：

function openDrawer() {
    _navigator.dispatch(DrawerActions.openDrawer())
}

不要忘记导入它们：

import { DrawerActions } from 'react-navigation';

然后从Navigation.js 文件中导出它们：

export default {
    setTopLevelNavigator,
    openDrawer,
}

Answer 2

AFAIK 从 React-navigation v3 打开抽屉就像这段代码一样调用

this.props.navigation.openDrawer();

编辑： 我尝试使用 react-navigation v3 最低限度地复制它 https://snack.expo.io/@keysl183/basic-drawer-v3