如何正确地构建Expo路由器中的选项卡中的堆栈导航？

Question

在反应导航中，我使用了这样的简单结构：

const TabNavigator = createBottomTabNavigator();
const StackNavigator = createStackNavigator();

function HomeStack() {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={HomeScreen} />
      <StackNavigator.Screen name="Search" component={SearchScreen} />
    </StackNavigator.Navigator>
  );
}

function AppTabs() {
  return (
    <TabNavigator.Navigator>
      <TabNavigator.Screen name="Home" component={HomeStack} />
      <TabNavigator.Screen name="Settings" component={SettingsScreen} />
    </TabNavigator.Navigator>
  );
}

EXPO路由器中的融合 我正在尝试在Expo路由器中实现相同的嵌套堆栈结构。这是我到目前为止所做的：

/app
 ├── _layout.tsx       # ✅ Main Stack (Wraps Everything)
 ├── /(tabs)           # ✅ Tab Navigator
 │    ├── _layout.tsx  # ✅ Tab Navigation
 │    ├── home         # ✅ Home Tab (With Stack)
 │    │    ├── _layout.tsx  # ✅ Stack for Home
 │    │    ├── index.tsx    # ✅ Home Screen
 │    │    ├── search.tsx   # ✅ Search Screen (Inside Home Stack)
 │    ├── settings      # ✅ Settings Tab (With Stack)
 │    │    ├── _layout.tsx  # ✅ Stack for Settings
 │    │    ├── index.tsx    # ✅ Settings Screen

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function TabsLayout() {
  return (
    <Tabs screenOptions={{ headerShown: false }}>
      <Tabs.Screen
        name="home"
        options={{
          title: "Home",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "Settings",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="settings-outline" color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}

我面对的isues 与React导航不同，该结构感觉非结构化，很难遵循。

当在屏幕之间导航时，有时我会遇到无与伦比的路由错误。
博览会路由器自动检测到所有文件作为路由，使其正确组织堆栈的混乱。

有一种更好的方法来构建Expo路由器中的选项卡中的堆栈导航？

🚀掌握世博路由器中的导航：标签，堆栈和共享屏幕的最佳实践

在博览会路由器中努力解决导航问题？标签重置，不正确的初始屏幕或折断导航？此详细的指南封面：

✅可扩展的博览会项目的正确文件夹结构 ✅以正确的方式设置标签和堆叠 ✅放置共享屏幕，例如帮助和个人资料，而无需打破导航 ✅使用自定义解决方案解决后退导航问题

Answer 1

阅读完整的指南并升级您的React Native Navigation技能！ 🚀🔥

🔗在这里检查一下：

https：//medium.com/@siddhantshelake/best-practices-for-expo-router-tabs-casts-snared-screens-screens-b3cacc3e8ebbb