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

React-navigation v3中的AFAIK打开抽屉就像这样的代码

this.props.navigation.openDrawer();

编辑：我试图使用react-navigation v3最小化复制 https://snack.expo.io/@keysl183/basic-drawer-v3

Answer 2

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

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,
}

无法打开抽屉反应本机

2 个答案: