React Native 堆栈和抽屉导航 v5

Question

我是 React Native 的新手，我正在尝试创建一个菜单，该菜单会在单击时打开并滑出，在菜单外单击时会滑回。

我很难找到任何体面的 tutorial/explanation 关于如何让堆栈和抽屉导航可用于页面和功能。

目前，我的 App.js 看起来像这样：

    import 'react-native-gesture-handler';
import React from 'react';
import Home from './app/screens/Home/Home';
import ArtistListing from './app/screens/ArtistListing/ArtistListing';
import ArtPeriods from './app/screens/ArtPeriods/ArtPeriods';
import Login from './app/screens/Login/Login';
import Quiz from './app/screens/Quiz/Quiz';
import GuessWhen from './app/screens/GuessWhen/GuessWhen';
import { NavigationContainer, useLinking } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {Auth, Hub} from 'aws-amplify';
import {SetCurrentUser} from './src/model/User';
import LearnMore from './app/screens/LearnMore/LearnMore';
import {CreateAllArtistsWithDependencies} from './src/model/Artists';
import ExploreTimePeriod from './app/screens/ExploreTimePeriod/ExploreTimePeriod';
import ExploreArtist from './app/screens/ExploreArtist/ExploreArtist';
import PhotoGalleryScreen from './app/screens/PhotoGalleryScreen/PhotoGalleryScreen';
import ExploreTimePeriods from './app/screens/ExploreTimePeriods/ExploreTimePeriods';
import ExploreArtists from './app/screens/ExploreArtists/ExploreArtists';
import QuizSummary from './app/screens/QuizSummary/QuizSummary';
import ContactUs from './app/screens/ContactUs/ContactUs';
import Profile from './app/screens/Profile/Profile';
import Favorites from './app/screens/Favorites/Favorites';
const Stack = createStackNavigator();
const App = () => {
  return (
      <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
              <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
              <Stack.Screen name="Login" component={Login} options={{headerShown:false}} />
              <Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>
              <Stack.Screen name="ArtPeriods" component={ArtPeriods} options={{headerShown:false}}/>
              <Stack.Screen name="GuessWhen" component={GuessWhen} options={{headerShown:false}}/>
              <Stack.Screen name="Quiz" component={Quiz} options={{headerShown:false}}/>
              <Stack.Screen name="LearnMore" component={LearnMore} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreTimePeriod" component={ExploreTimePeriod} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreTimePeriods" component={ExploreTimePeriods} options={{headerShown:false}}/>
              <Stack.Screen name="PhotoGalleryScreen" component={PhotoGalleryScreen} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreArtist" component={ExploreArtist} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreArtists" component={ExploreArtists} options={{headerShown:false}}/>
              <Stack.Screen name="QuizSummary" component={QuizSummary} options={{headerShown:false}}/>
              <Stack.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
              <Stack.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
              <Stack.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/>
          </Stack.Navigator>
      </NavigationContainer>
  );
};

export default App;

我想要一个抽屉导航器以及下面列出的页面。我知道我可能需要一个切换导航器，但是版本 5 的所有东西都超级难找。我打赌我不是唯一一个在寻找关于如何做到这一点的明确答案的人。

          <Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
      <Drawer.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
      <Drawer.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/> 

如果你有这方面的想法，请给我一个建议。

Answer 1

假设你登录后的堆栈像

const Stack = createStackNavigator();
const App = () => {
return (
  <NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
  <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
  <Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>  
  </Stack.Navigator>
  </NavigationContainer>
  );
  };

假设这是您的抽屉导航。

const Drawer = createDrawerNavigator();
function drawers(){
<Drawer.Screen name="Home" component={App} options={{headerShown:false}}/>
 <Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
  <Drawer.Screen name="Profile" component={Profile} options={{headerShown:false}}/> 
   }

现在抽屉默认无处不在。默认情况下，主屏幕将是您的第一个屏幕。

现在是 AuthFlow 的一部分。

const AuthFlowStack = createStackNavigator();
function AuthFlow(){
<AuthFlow.Screen name='LogIn' component={LogIn} />
}

主要堆栈流程（将充当 SwitchNavigator）

const Main = createStackNavigator();
function MainFlow(){
{this.state.isLogin ? <Drawer/> :<AuthFlow/>}
}
export default {MainFlow};

并在登录时将isLogin的值设置为true并作为参数发送，在注销时设置为false。