Expo-router特定文件夹Tabs导航失效问题求助

现象 #

• 其他文件夹路由：导航流畅，点击Tab即可切换视图，仅显示抽屉导航，符合预期。
• Audits文件夹路由：audits/[id]动态页面或audits/index页面导航失效，需手动聚焦内部页面或通过按钮交互才生效，Tabs导航表现不稳定。

问题文件夹特殊点 #

• 该路由可能需要额外导航配置，但不清楚具体修改项。
• Tabs嵌套在audits文件夹中，疑似与全局Drawer导航存在冲突。

Audits文件夹_layout.tsx代码 #

import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function AuditsLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: { position: 'absolute', backgroundColor: 'transparent' },
          default: { backgroundColor: Colors[colorScheme ?? 'light'].background },
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="new"
        options={{
          title: 'New',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="square.fill" color={color} />,
        }}
      />
       <Tabs.Screen
        name="[id]"
        options={{
          title: 'Show',
          tabBarShowLabel: true,
          href: null, 
        }}
      />
    </Tabs>
  );
}

根目录_layout.tsx代码 #

import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack, Tabs, useRouter, useSegments } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState } from "react";
import "react-native-reanimated";
import "../global.css";
import { i18n, initializeLocale } from "../services/localization";
import { Provider, useSelector, useDispatch } from "react-redux";
import { AppDispatch, RootState } from "@/store/redux";

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Drawer } from "expo-router/drawer";
import { DrawerToggleButton } from "@react-navigation/drawer";
import { View } from "react-native";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "@/store/redux";
import ConnectionStatusIndicator from "@/components/My components/ConnectionStatusIndicator";
import { monitorConnection } from "@/store/redux/connectionSlice";
import { SafeAreaView } from "react-native-safe-area-context";
import NavigationDrawer from "@/components/My components/NavigationDrawer";
import { themes } from "@/store/redux/themeSlice";

SplashScreen.preventAutoHideAsync();

function AppContent() {
  const { theme, settings } = useSelector((state: RootState) => state.theme);
  const dispatch = useDispatch<AppDispatch>();
  const segments = useSegments(); // Get the current route segments

  const hideDrawerToggleRoutes = ["login", "password-reset", "+not-found"];

  const isHiddenRoute = segments.some((segment) =>
    hideDrawerToggleRoutes.includes(segment)
  );

  useEffect(() => {
    dispatch(monitorConnection());
  }, [dispatch]);

  return (
    <ThemeProvider value={theme === "dark" ? DarkTheme : DefaultTheme}>

    <SafeAreaView className={`flex-1 ${settings.SafeAreaView}`}>

      <StatusBar style={theme === "dark" ? "light" : "dark"} />

      <GestureHandlerRootView className="flex-1">
        {!isHiddenRoute && (
          <View
            className={`h-20 flex-row items-center px-4  ${settings.DrawerHeader}`}
          >
            <DrawerToggleButton />
            <View className="ml-2">
              <ConnectionStatusIndicator />
            </View>
          </View>
        )}

        <NavigationDrawer />
      </GestureHandlerRootView>
    </SafeAreaView>
    </ThemeProvider>
  );
}

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
      initializeLocale();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AppContent />
      </PersistGate>
    </Provider>
  );
}

解决方案 #

1. 移除动态路由在Tabs中的注册 #

动态路由[id]属于详情页，不应出现在Tabs栏中，删除AuditsLayout中对应的Tabs.Screen代码：

// 移除这段代码
<Tabs.Screen
  name="[id]"
  options={{
    title: 'Show',
    tabBarShowLabel: true,
    href: null, 
  }}
/>

详情页需通过index或new页面导航进入，而非作为Tab选项存在。

2. 确保Drawer正确嵌套Tabs #

检查NavigationDrawer组件，确保audits路由被正确注册为Drawer的屏幕，让Tabs布局作为该屏幕的子导航：

// NavigationDrawer示例配置
import { Drawer } from 'expo-router/drawer';

export default function NavigationDrawer() {
  return (
    <Drawer>
      {/* 其他Drawer屏幕 */}
      <Drawer.Screen name="audits" options={{ title: 'Audits' }} />
      {/* 其他Drawer屏幕 */}
    </Drawer>
  );
}

3. 给Tabs添加唯一导航键 #

在AuditsLayout的Tabs组件中添加navigationKey，避免与Drawer导航上下文冲突：

<Tabs
  screenOptions={{...}}
  navigationKey="audits-tabs" // 添加唯一标识
>
  {/* 保留index和new的Screen */}
</Tabs>

4. 修复动态路由导航逻辑 #

在audits/index页面中，使用push方法导航到详情页，确保不破坏Tabs的导航栈：

import { useRouter } from 'expo-router';

const router = useRouter();
// 点击事件中调用
router.push(`/audits/${item.id}`);

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