React本机堆栈和抽屉导航v5

Question

我是新来的响应本机的人，我正在尝试创建一个菜单，该菜单将在单击并滑出时打开，而在菜单外部单击时将滑回。

我很难找到任何体面的教程/说明，以了解如何使堆栈和抽屉导航可用于页面和功能。

当前，我的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}}/> 
   }

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

现在是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。