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

Question

我是 React Native 的新手，并尝试在移动应用程序上工作以获得乐趣。我在制作侧边菜单或抽屉导航时遇到问题。我遵循了本机反应网站中提供的文档，但令我困惑的是无法在抽屉中隐藏某些屏幕。

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

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

Answer 1

YoutTube 上的这个播放列表真的很有帮助。他涵盖了您正在寻找的所有内容。看看这个。通过观看这些视频，我的应用开始运行。

Answer 2

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

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

然后是 AuthenticationStackNavigation

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

您需要显示的抽屉选项卡中的每个项目仍然有堆栈，您想要的示例 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），您应该在其中添加所有屏幕。（没有代码演示，因为与您的问题无关）。如果你想要方向打开应用程序 -> 飞溅 -> login/signup（或回家） -> 家。我建议你创建它

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

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

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

using drawer navigator and stack navigator in react native

javascript

mobile-development

react-native