如何使用组合 v5 在 React Native 中使用 Stack 和 Drawer

Question

我是 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};

Answer 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/ 以获得更深入的了解。

如何使用组合 v5 在 React Native 中使用 Stack 和 Drawer

How to user Stack and Drawer in React Native with combine v5

react-native

react-navigation

react-navigation-drawer

react-navigation-stack

react-navigation-v5