如何在React Native中使用Expo Router正确设置嵌套选项卡的初始路由？

Question

我正在使用 Expo 和 Expo Router 进行导航来构建 React Native 应用程序，但在应用程序启动时设置初始选项卡时遇到了问题。尽管在我的选项卡配置中配置了初始路由名称，但应用程序默认加载

index.tsx

文件。我希望将“观看”选项卡作为初始视图。

该项目的结构如下，特别关注我的

_layout.tsx

文件所在的应用程序和（选项卡）目录：

src/
├── app/
│   ├── (screens)/
│   │   ├── _layout.tsx        # Root layout for screens
│   │   └── ...                # Other screens
│   ├── (tabs)/
│   │   ├── _layout.tsx        # Layout for tabs
│   │   ├── account.tsx        # Account tab screen
│   │   └── watch.tsx          # Watch tab screen
│   ├── _layout.tsx            # Main layout file
│   └── index.tsx              # Entry point
├── common/
├── components/
├── config/
└── constants/

在

app/_layout.tsx

中，我指定了

(tabs)

中的

RootLayoutNav

作为要加载的路线。然后，

_layout.tsx

目录中的

(tabs)

将“watch”设置为初始路线。这是

app/_layout.tsx

文件的相关部分：

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

这是我在

app/(tabs)/_layout.tsx

文件中的配置：

return (
        <Tabs screenOptions={{
            initialRouteName: 'watch',
            tabBarActiveTintColor: Colors.primary,
            tabBarLabelStyle: {
                fontFamily: 'mon-sb',
            },
        }}>
            <Tabs.Screen name="watch" options={{
                tabBarLabel: 'Watch',
                tabBarIcon: ({ color, size }) => <Ionicons name="play-circle-outline" size={size} color={color} />
            }} />

            <Tabs.Screen name="account" options={{
                tabBarLabel: 'Account',
                tabBarIcon: ({ color, size }) => <Ionicons name="person-circle-outline" size={size} color={color} />
            }} />
        </Tabs>
    )

任何关于为什么会发生这种情况以及如何解决它的帮助或见解将不胜感激！

Answer 1

initialRouteName 不是

screenOptions

的一部分。它应该在同一水平上，像这样：

<Tabs
  initialRouteName="watch"
  screenOptions={{
    ...
  }}
>
...
</Tabs>