Question

我使用了“反应导航”：“ ^ 4.0.2” ，“反应导航抽屉”：“ ^ 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 本机反应。

Answer 1

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

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

因为如果您的应用上发生了类似onSwipe之类的事件，并且您传递了toggleDrawer函数，它就可以实现。

StackNavigator和DrawerNavigator无法正常响应本机

1 个答案: