Expo-router 选项卡无法在特定导航文件夹中工作，除非我专注于内页并与按钮交互

Question

我正在使用 expo-router 设置选项卡布局并遇到问题；选项卡导航在特定文件夹结构中无法按预期工作；我对审核文件夹使用选项卡导航，并使用抽屉进行更全局的导航。这是我观察到的：

1. 预期行为（其他文件夹）：对于大多数路线，导航可以无缝运行。单击选项卡会立即更新视图，而不需要额外的交互，而不是唯一的其他导航是抽屉。
2. 有问题的行为（某些文件夹）：对于特定路线（例如 Audits [id] 动态文件夹或 Audits 索引），导航似乎无法正常工作，除非我通过与按钮交互或手动明确关注内页更深入地导航到文件夹结构。即便如此，选项卡导航仍然感觉不一致。

有问题的文件夹的一些独特特征：

1. 这些路线可能需要额外的导航行为配置，但我不确定需要进行哪些更改。
2. 选项卡位于特定的文件夹布局中，该文件夹称为审核，可能与抽屉和选项卡这两种冲突的导航方法有关。

这是我的审核_布局代码：

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>
  );
}

这是我的 Base _layout 代码：

    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>
  );
}

Answer 1

在这个问题上坐了这么久之后，我的解决方案是更新我的所有依赖项，现在我真的不知道是什么为我解决了这个问题，但它可能与世博会有关。