Expo Router v3 选项卡未显示，缺少某些内容？

Question

我尝试了各种修改，但无法使选项卡导航工作。由于某种原因，选项卡不显示。

我有一个笔记应用程序，索引只是一张包含所有笔记的壁画，单击时，它们应该转到带有编辑屏幕和查看屏幕的选项卡。

这是app/__layout.js：

import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import { Slot } from "expo-router";
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from "react-native-safe-area-context";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import useStore from "../hooks/useStore";
import { useEffect } from "react";

export default function RootLayout() {

  const loadNotes = useStore(state => state.loadNotes);

  useEffect(() => {
    loadNotes();
  }, [loadNotes]);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
        <View style={styles.mainView}>
          <StatusBar style="light" />
          <Slot />
        </View>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    height: "100%",
    backgroundColor: "rgb(51,52,53)",
    alignItems: "center",
    justifyContent: "center",
  },
});

这是 (tabs)/__layout.js:

import { Tabs } from "expo-router";
import { useLocalSearchParams } from "expo-router";

export default function TabsLayout() {

  const { id } = useLocalSearchParams();
  
  return (
    <Tabs>
      <Tabs.Screen
        name="edit/[id]"
        options={{
          tabBarLabel: "edit",
          title: "edit",
          href: {
            pathname: "/edit/[id]",
            params: {
              id: id,
            },
          },
        }}
      />
      <Tabs.Screen
        name="view/[id]"
        options={{
          tabBarLabel: "view",
          title: "view",
          href: {
            pathname: "/view/[id]",
            params: {
              id: id,
            },
          },
        }}
      />
    </Tabs>
  );
}

在 tabs/index.js 中我只需进行重定向：

import { Redirect, useLocalSearchParams } from "expo-router";

export default function TabsLayout() {
  
  const { id } = useLocalSearchParams();

    return (<Redirect href={`/edit/${id}`}/>)

}

可重现的示例：只需克隆并运行应用程序https://github.com/danielx-art/notes

我尝试过更改路径、更改选项卡上的 screenOptions、删除 SafeAreaContext 和 GestureHandler...、从（选项卡）中删除索引文件、为（选项卡）/编辑和（选项卡）/查看全部创建索引文件，但都没有成功，我觉得我在这里错过了一些东西。

Answer 1

您找到解决方案了吗？我也有同样的问题。