expo路由器：如何为每个选项卡创建堆栈？

Question

expo router 中的等效文档在哪里：https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab

基本上我喜欢在底部选项卡中使用动态路由来制作嵌套堆栈。

举个例子：假设我们有一个类似于短信应用程序的选项卡。该选项卡称为“聊天”。在“聊天”选项卡中，您可以看到所有聊天，并且应该位于 /chats，并且通过单击聊天，您应该会进入带有消息历史记录的屏幕：/chats/

我尝试将其设置如下，但它是错误的，因为我得到了 2 个底部选项卡渲染，1 个用于聊天/索引，一个用于聊天/[聊天]/索引：

app
--(tabs)
  _layout.tsx
   index.tsx
    chats
      -index.tsx
      -_layout.tsx
        [chat]
          -index.tsx
          -_layout.tsx

Answer 1

我刚刚就这么做了。

文件夹结构：

app
  (tabs)
  _layout.tsx -> Let's call this TabsLayout
  chats
    _layout.tsx -> Let's call this ChatsLayout
    index.tsx
    [chatId].tsx

代码：

// app/(tabs)/_layout.tsx

import { Tabs } from "expo-router"

export default function TabLayout() {
    return (
        <Tabs>
            <Tabs.Screen name="chats" />
        </Tabs>
    )
}

// app/(tabs)/chats/_layout.tsx

import { Stack } from "expo-router"

export default function ChatsLayout() {
    return (
        <Stack />
    )
}

最后注意事项：

• 在

  app/(tabs)/chats/index.tsx

  内是放置聊天列表的位置，然后导航到

  app/(tabs)/chats/<some-id>

  。