React Native 0.71.8如何导航至子文件夹内页面？

问题根源 #

你遇到的报错是因为Expo Router（React Native 0.71.8默认搭配的文件系统路由）的嵌套路由规则：带_layout.tsx的目录是独立路由组，movies/comedy属于movies路由组的子路由，不能直接在根Drawer导航器中注册。根导航器仅能管理到movies这一级，comedy的路由需由movies/_layout.tsx负责处理。

解决步骤 #

1. 修正根目录_layout.tsx的导航配置

移除直接注册(screens)/movies/comedy的代码，只保留到movies级别的路由：

import { Drawer } from 'expo-router/drawer';

export default function RootLayout() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="(screens)/home" component={HomeScreen} />
      <Drawer.Screen name="(screens)/about" component={AboutScreen} />
      <Drawer.Screen name="(screens)/movies" component={MoviesScreen} />
    </Drawer.Navigator>
  );
}

2. 在movies/_layout.tsx中配置子路由

movies目录的_layout.tsx需要管理其下的子路由，这里以Stack.Navigator为例：

import { Stack } from 'expo-router';
import ComedyScreen from './comedy/_layout'; // 若comedy是单独页面，需导入对应组件

export default function MoviesLayout() {
  return (
    <Stack.Navigator>
      {/* 对应movies主页面 */}
      <Stack.Screen name="_layout" options={{ title: '电影专区' }} />
      {/* 注册comedy子路由 */}
      <Stack.Screen name="comedy" component={ComedyScreen} options={{ title: '喜剧电影' }} />
    </Stack.Navigator>
  );
}

3. 正确跳转至comedy页面

从其他页面跳转时，需使用嵌套导航的语法：

// 示例：在HomeScreen中添加跳转按钮
<Button
  title="查看喜剧电影"
  onPress={() => {
    navigation.navigate('(screens)/movies', { screen: 'comedy' });
    // 可简化为：navigation.navigate('movies', { screen: 'comedy' })
  }}
/>

4. 可选：优化comedy的文件结构

如果comedy只是单独页面而非路由组，建议将movies/comedy/_layout.tsx重命名为movies/comedy.tsx，这更符合Expo Router的文件路由规范，避免混淆布局文件与页面文件。

额外说明 #

• Expo Router中，(screens)是路由组文件夹，导航时可省略前缀，直接使用home、movies等名称。
• 每个_layout.tsx是对应目录的路由容器，负责管理该目录下所有子路由的导航逻辑与布局样式。

内容的提问来源于stack exchange，提问作者bstras21