自定义导航器导致Expo Router嵌套导航失效问题排查

项目目录结构 #

├── (app)
│   ├── (tabs)
│   │   ├── _layout.tsx
│   │   ├── chat
│   │   │   ├── _layout.tsx
│   │   │   └── index.tsx
│   │   ├── overview
│   │   │   ├── _layout.tsx
│   │   │   └── index.tsx
│   │   └── settings
│   │       ├── _layout.tsx
│   │       └── index.tsx

相关代码 #

(tabs)/_layout.tsx #

import {CustomTopTabs} from "@components/ui/layouts/CustomTopTabs";

export default function Layout() {
    return (
        <CustomTopTabs />
    )
}

CustomTopTabs.tsx #

// imports

const Tab= createMaterialTopTabNavigator();

function CustomTopTabNavigator() {

    return (
        <Tab.Navigator
            initialRouteName='overview'
            screenOptions={({route}) => 
               // screen options
        }>
            <Tab.Screen name="settings" component={Settings} />
            <Tab.Screen name="overview" component={Overview} />
            <Tab.Screen name="chat" component={Chat} />
        </Tab.Navigator>
    )
}

export const CustomTopTabs = withLayoutContext(CustomTopTabNavigator);

// styles

chat/_layout.tsx #

import {Slot} from "expo-router";
import {Group} from "@ui/layout";

export default function Layout() {
    return (
        <Group style={{backgroundColor: 'black'}}>
            <Slot />
        </Group>
    );
}

chat/index.tsx #

import {Text} from "@ui";
import {View} from "react-native";


export default function Page() {
    return <View>
        <Text.Display padBottom={8}>Chat</Text.Display>
    </View>
};

问题 #

chat子目录中的_layout.tsx布局未生效，是否是自定义导航器导致嵌套导航无法正常工作？

核心原因 #

直接在自定义Tab导航器中导入并渲染Chat、Overview、Settings组件，跳过了Expo Router的路由解析流程——Expo Router无法识别这些直接渲染的组件对应的子目录_layout.tsx，自然不会应用该布局。

Expo Router的嵌套布局生效的前提是通过路由名称匹配加载对应的路由节点，而非直接导入组件实例。

解决方案 #

步骤1：修改CustomTopTabs.tsx，接入Expo Router路由机制 #

不再直接导入组件，而是通过Screen的name属性匹配路由路径，用Slot让Expo Router自动加载对应路由及嵌套布局：

import { Slot } from 'expo-router';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function CustomTopTabNavigator() {
  return (
    <Tab.Navigator
      initialRouteName='overview'
      screenOptions={({ route }) => ({
        // 保留你的原有screenOptions配置
      })}>
      {/* name需与子目录名称完全匹配，Expo Router会自动加载对应路由和_layout */}
      <Tab.Screen 
        name="settings" 
        component={() => <Slot />} 
        options={{ tabBarLabel: 'Settings' }} 
      />
      <Tab.Screen 
        name="overview" 
        component={() => <Slot />} 
        options={{ tabBarLabel: 'Overview' }} 
      />
      <Tab.Screen 
        name="chat" 
        component={() => <Slot />} 
        options={{ tabBarLabel: 'Chat' }} 
      />
    </Tab.Navigator>
  );
}

export const CustomTopTabs = withLayoutContext(CustomTopTabNavigator);

步骤2：保持父布局结构不变 #

(tabs)/_layout.tsx无需修改，它会作为父布局加载自定义导航器，导航器中的Slot会自动匹配对应子目录的路由和_layout.tsx。

原理说明 #

使用component={() => <Slot />}时，Expo Router会根据Tab的name（如"chat"）匹配(tabs)/chat目录的路由结构，优先加载chat/_layout.tsx，再通过Slot渲染chat/index.tsx，嵌套布局即可生效。

额外验证点 #

• 确认withLayoutContext正确包裹导航器组件，这是自定义导航器接入Expo Router布局上下文的关键。
• 检查screenOptions中的配置是否未覆盖布局样式（如背景色设置冲突）。

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