如何使用 combine v5 在 React Native 中使用 Stack 和 Drawer答案

【问题标题】：How to user Stack and Drawer in React Native with combine v5如何使用 combine v5 在 React Native 中使用 Stack 和 Drawer
【发布时间】：2020-11-16 19:17:33
【问题描述】：

我是 React Native 的新手，需要关于 navigation 功能如何工作以及如何使用 Stack.screen 和 Drawer.screen 设置身份验证和仪表板屏幕的指南。以下是我的代码，我试着写了。

请更正，如果可能的话，再解释一下。

import * as React from 'react';

import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import LoginScreen from "../layouts/LoginScreen";
import ForgotPasswordScreen from "../layouts/ForgetPassword";
import HomeScreen from '../layouts/HomeScreen';
import SettingScreen from '../layouts/SettingScreen';
import ContactUs from '../layouts/ContactUs';
import Help from '../layouts/Help';

const Stack = createStackNavigator();
const AuthFlowStack = createStackNavigator();
const Drawer = createDrawerNavigator();

const appName = "XXX";

// Took it for general all pages
const MyStack = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator 
            initialRouteName='Home'
            headerMode='float'
            mode='modal'
          >
            <Stack.Screen options={{
                            headerShown: false
                          }}
                          name='Home' 
                          component={HomeScreen} />
            <Stack.Screen name="SettingScreen" component={SettingScreen} options={{headerShown:false}}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
}

// Inside Drawer I want to show these pages
function MyDrawer() {
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={MyStack} options={{headerShown:false}} />
        <Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}} />
        <Drawer.Screen name="Help" component={Help} options={{headerShown:false}} />
      </Drawer.Navigator>
}

// Auth module where Login/Registration/Forgetpassword Like screen without authentication user will open
function AuthFlow() {
  <NavigationContainer>
    <AuthFlowStack.Screen name='Login' component={LoginScreen} />
    <AuthFlowStack.Screen options={({ navigation, route }) => ({
      headerLeft: ({props}) => (
        <HeaderBackButton
          {...props}
          onPress={() => {
            navigation.navigate("Login")
          }}
        />
      ),
      title: `Forgot Password? - ${appName}`,
      headerTitleAlign: 'center'
    })}
    name='ForgotPasswordScreen'
    component={ForgotPasswordScreen} />
  </NavigationContainer>
}

//Main AppStack where I'm thinking to check isLoggedIn and MyDrawer / AuthFlow I can add.
function AppStack(){
  <MyDrawer/>
}
export default {AppStack};

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-v5 react-navigation-drawer

【解决方案1】：

代码如下所示

function AuthFlow() {
    <AuthFlowStack.Navigator>
        <AuthFlowStack.Screen name='Login' component={LoginScreen} />
        <AuthFlowStack.Screen options={({ navigation, route }) => ({
            headerLeft: ({ props }) => (
                <HeaderBackButton
                    {...props}
                    onPress={() => {
                        navigation.navigate("Login")
                    }}
                />
            ),
            title: `Forgot Password? - ${appName}`,
            headerTitleAlign: 'center'
        })}
            name='ForgotPasswordScreen'
            component={ForgotPasswordScreen} />
    </AuthFlowStack.Navigator>
}

//Main AppStack where I'm thinking to check isLoggedIn and MyDrawer / AuthFlow I can add.
function AppStack() {
    <NavigationContainer>
        {
            isLoggedIn ? <MyDrawer /> : <AuthFlow />
        }
    </NavigationContainer>
}

这里有两个导航器抽屉，分别是您的应用堆栈和用于身份验证的堆栈导航器。

一旦您更新 isLoggedIn（使用上下文、状态、异步存储取决于您的应用），将根据值显示一个导航器。

并且您应该在根级别只有一个 NavigationContainer。

最好看看https://reactnavigation.org/docs/auth-flow/ 以获得更深入的了解。

【讨论】：