在 React Native 中使用抽屉导航器和堆栈导航器

问题描述

我是本机反应的新手，并试图在移动应用程序上工作以获得乐趣。我在制作侧边菜单或换句话说抽屉导航时遇到问题。我遵循了 react native 网站中给出的文档，但让我感到困惑的是无法隐藏抽屉中的某些屏幕。

例如，如果我们有：loginScreen、signupScreen、homeScreen、profileScreen。我想要主屏幕中的抽屉菜单，其中有一个选项卡转到 profileScreen 那么我将如何实现这一目标？还要记住，我想按下一个从 loginScreen 到 signupScreen 的按钮，因此我需要使用 stackNavigator。

我尝试使用嵌套抽屉和堆栈导航器，但有些地方不对劲。有人可以指导我朝着正确的方向前进，以帮助我实现目标。提前致谢！

解决方法

YoutTube 上的这个播放列表真的很有帮助。他涵盖了您正在寻找的所有内容。一探究竟。我通过关注这些视频让我的应用运行起来。

,

当我是新人时，我和你有同样的问题。我可以给你一些演示堆栈导航代码。 首先，您应该创建 HomeStackNavigation

import { createStackNavigator } from "react-navigation-stack";
const HomeStackNavigation = createStackNavigator(
{
    Home: HomeScreen,Login: LoginScreen,Profile: ProfileScreen,});

然后是AuthenticationStackNavigation

const AuthenticationStackNavigation = createStackNavigator(
{
    Login: LoginScreen,Signup: SignupScreen,});

您需要显示的抽屉选项卡中的每个项目也仍然有堆栈，您想要的示例 ProfileScreen：

const ProfileStackNavigation = createStackNavigator(
{
    Profile: ProfileScreen,});

或

export const ProfileStackNavigation = createStackNavigator(
{
    Profile: {
        screen: ProfileScreen,navigationOption: () => {} // Must have icon back to home...
    },},);

毕竟你需要 DrawerNavigation

const DrawerNavigator = createDrawerNavigator(
{
    Profile: ProfileStackNavigation,})

如果您有底部选项卡（使用BottomTabNavigator），您应该在其中添加所有屏幕。 （没有代码演示，因为与您的问题无关）。 如果你想要方向打开应用程序 -> 启动 -> 登录/注册（或回家） -> 主页。我建议你创建它

import {createAppContainer,createSwitchNavigator} from 'react-navigation';
const SwitchNavigator = createSwitchNavigator({
    Startup: {
        screen: StartupScreen,Auth: {
        screen: AuthenticationStackNavigation,Home: {
        screen: DrawerNavigator,});
export default createAppContainer(SwitchNavigator);

如果有任何问题，请联系我进行简单的文件导航，我有演示项目的代码。谢谢！