无法打开抽屉反应本机

Question

我创建了createDrawerNavigator。但是当调用"props.navigation.dispatch(DrawerActions.openDrawer((("时，没有任何显示。这是我的代码。

菜单导航器.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;

应用导航器

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);

调用打开抽屉

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();

编辑： 我试图使用反应导航 v3 最低限度地复制它 https://snack.expo.io/@keysl183/basic-drawer-v3