StackNavigator 和 DrawerNavigator 不工作反应原生

Question

我用过"react-navigation": "^4.0.2", "react-navigation-drawer": "^2.2.1", "react-navigation-stack": "^1.5.4", "react-navigation-tabs": "^2.4.1" 在我的项目中。

我结合了 StackNavigator 和 DrawerNavigator，当我点击溢出图标时，抽屉导航菜单应该会打开。

但问题是当我打开应用程序时 DrawerNavigator 总是打开。它始终显示在屏幕上。所以页面是不可见的。请查看我的代码。

AppNavigator.tsx

import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from "react-navigation-drawer";
import SplashScreen from "./src/app/components/Splash";
import LoginScreen from "./src/app/components/Accounts/Login";
import RegisterScreen from "./src/app/components/Accounts/Register";
import ForgotScreen from "./src/app/components/Accounts/Forgot";
import DrawerMenu from "./src/app/components/DrawerMenu";
import HomeScreen from "./src/app/components/Dashboard/Home";

const AppNavigator = createStackNavigator(
{
    Splash: { screen: SplashScreen },
    Login: { screen: LoginScreen },
    Register: { screen: RegisterScreen },
    Forgot: { screen: ForgotScreen },
    Home: { screen: HomeScreen }
},
{
    initialRouteName: "Splash",
    headerMode: "none"
}
);

const DrawerNavigator = createDrawerNavigator(
{
    Home: {
        screen: AppNavigator
    }
},
{
    contentComponent: DrawerMenu,
    drawerLockMode: "locked-closed"
}
);

const MainNavigation = createSwitchNavigator({
    HomeDrawer: DrawerNavigator,
    AuthStack: AppNavigator
});

const App = createAppContainer(MainNavigation);

export default App;

App.tsx

import React from "react";
import AppNavigator from "./AppNavigator";

export default function App() {
  return <AppNavigator />;
}

DrawerMenu.tsx

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";

export default class DrawerMenu extends Component {
render() {
    return (
    <View>
        <View style={styles.container1}>
        <Image
            style={styles.image}
            source={require("../../../assets/logo.png")}
        />
        </View>
        <TouchableOpacity
        onPress={() => this.props.navigation.navigate("Home")}
        >
        <View style={styles.container}>
            <Text style={styles.title}>Home</Text>
        </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => alert()}>
        <View style={styles.container}>
            <Text style={styles.title}>My Profile</Text>
        </View>
        </TouchableOpacity>
        <TouchableOpacity
        onPress={() => this.props.navigation.navigate("About")}
        >
        <View style={styles.container}>
            <Text style={styles.title}>About</Text>
        </View>
        </TouchableOpacity>
    </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
},
container1: {
    padding: 20,
    backgroundColor: "#0d2c4f"
},
title: {
    fontSize: 16,
    fontWeight: "bold"
},
image: {
    width: "100%",
    height: 50,
    resizeMode: "contain"
}
});

代码有问题吗。如何解决这个问题，有什么解决方案。我正在使用 expo react native。

Answer 1

抽屉的打开方法在哪里？ 您是否使用以下一种：

this.props.navigation.dispatch(DrawerActions.toggleDrawer());

因为如果你在你的应用上有任何像 onSwipe 这样的事件并且你传入了 toggleDrawer 函数，它就可以实现。