如何将路由文件移动到 React Native Expo 中的路由文件夹中

Question

我有一个 React 本机博览会应用程序。根据官方文档，几乎 /app 文件夹中的每个文件都应该是一个路由。因此文件 app/settings.tsx 将映射到设置路由。

这是我的项目的文件夹结构：

在

_layout.tsx

文件中，我有以下代码：

import { Stack } from "expo-router";

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

在 settings/index.tsx 文件中，我有以下代码：

import { Text, View } from "react-native";

export default function Settings() {
    return (
        <View
            style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <Text>Edit app/settings/index.tsx to edit this screen.</Text>
        </View>
    );
}

我希望能够在文件夹内拥有一条路线，以便我可以在路线内组织相关样式和其他文件。根据文档，这将使用以下模式完成：app/settings/index.tsx。然而，当我尝试加载堆栈中的路由时，这会导致错误，提示该路由不存在。

我在这里做错了什么，我该如何修复它以使路线出现？预先感谢您提供的任何帮助。

Answer 1

您正在

_layout.tsx

中定义堆栈，您应该只定义组件布局。有关详细信息，请参阅 https://docs.expo.dev/router/layouts/#create-a-layout-route。

您的

_layout.tsx

中的自定义堆栈不知道“设置”指的是什么。 （隐藏/自动）react-native 堆栈将使用“settings/index”作为路由名称。

您只需删除

_layout.tsx

就可以了。