導航和抽屜導航React-Native-有解無憂

所以我已經有了一個導航系統，并且想在用戶登錄后從主購物頁面開始為特定導航添加一個抽屜選單。我遇到的問題是在網上遵循了一些關于如何擁有多個導航的指示不同型別的抽屜按鈕在點擊時根本不做任何事情。非常感謝任何見解或幫助。

我在 app.js 檔案中有 NavigationContainer，其中包含 DrawerMenu 檔案，我通過該檔案匯入了主 StackNavigator 檔案。

主 StackNavigator 檔案

    // Main Nav
    import PasswordVerify from '../screens/PasswordVerify';
    import HomeShopping from '../screens/HomeShopping';
    import StorePage from '../screens/StorePage';

    // Drawer Screens
    import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
    import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
    import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';


    const Stack = createNativeStackNavigator();

    const Navigation = () => {
      return (
         <Stack.Navigator>
            <Stack.Screen name="PasswordVerify" component={PasswordVerify} />
            <Stack.Screen name="HomeShopping" component={HomeShopping} />
            <Stack.Screen name="StorePage" component={StorePage} />
            {/* Drawer Screens */}
            <Stack.Screen name="ProfileIndex" component={ProfileScreen} />
            <Stack.Screen name="MyListingsIndex" component={MyListingsScreen} />
            <Stack.Screen name="SellerDashboardIndex" component={SellerDashBoardScreen} />
         </Stack.Navigator>

抽屜選單檔案

    import { createDrawerNavigator } from '@react-navigation/drawer';

    import Navigation from './StackNavigator';

    const Drawer = createDrawerNavigator();

    const DrawerMenu = () => {
      return (

          <Drawer.Navigator screenOptions={{headerShown: false}}>
          <Drawer.Screen name="Profile" component={Navigation} />
          <Drawer.Screen name="MyListings" component={Navigation} />
          <Drawer.Screen name="SellerDashboard" component={Navigation} />

這正是我從閱讀的指南中解釋的內容，并盡我所能，他們有作業示例，一切都匹配，除了當我拉出抽屜選單時，點擊那里的名字什么都不做。

再次感謝您的時間和幫助。

嘗試在我的 react-native 應用程式中實作抽屜導航，而我已經為所有非抽屜鏈接設定了另一個主導航。結果是抽屜上的鏈接根本沒有回應。

uj5u.com熱心網友回復：

我會理解你的想法如下：

您有 3 個螢屏：PasswordVerify、HomeShopping、StorePage。
您有一個帶有 3 個螢屏的抽屜：ProfileScreen、MyListingsScreen、SellerDashBoardScreen。
您希望從 PasswordVerify（或 HomeShopping 或 StorePage）重定向到 Drawer。
您希望在重定向后，您可以看到您的抽屜并可以按（或滑動）顯示抽屜選單。

我對你的情況有一個想法：

定義抽屜。
像 Stack 一樣使用 Drawer(defined)。
在 Stack.Navigator 中匯入抽屜。

這是代碼：

const Drawer = createDrawerNavigator();

const DrawerNav = () => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
      <Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
      <Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
    </Drawer.Navigator>
  );
};

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PasswordVerify" component={PasswordVerify} />
        <Stack.Screen name="HomeShopping" component={HomeShopping} />
        <Stack.Screen name="StorePage" component={StorePage} />
        <Stack.Screen name="DrawerNav" component={DrawerNav} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521106.html

標籤：安卓反应式导航导航抽屉

上一篇：如何從下拉組件外部關閉自定義下拉選單？

下一篇：如果匹配，如何從陣列中洗掉一項？