由于侧抽屉配置错误，React 本机应用程序显示空白屏幕

Question

我正在开发一个用于学习 React Native 的库应用程序，但我无法设置侧抽屉。 当我配置侧抽屉实现（通过根布局）时，我的 React Native 应用程序给出空白屏幕

如果我将根布局文件恢复到下面的代码，一切正常，但没有侧抽屉。

import { Stack } from "expo-router";
import React from "react";

export default function AuthRoutesLayout() {
  return <Stack />;
}

我的问题根布局文件在下面共享

import "../global.css";
import { Drawer } from "expo-router/drawer";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function Layout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer screenOptions={{ headerShown: false }}>
        <Drawer.Screen
          name="auth"
          options={{
            drawerLabel: "",
            drawerItemStyle: { height: 0 }
          }}
        />
        <Drawer.Screen
          name="auth/Login"
          options={{
            drawerLabel: "",
            drawerItemStyle: { height: 0 }
          }}
        />
        <Drawer.Screen
          name="Explore"
          options={{
            drawerLabel: "Explore",
          }}
        />
      </Drawer>
    </GestureHandlerRootView>
  );
}

我可以确认错误仅来自根布局文件

有人可以帮我吗？

我的文件夹结构如下图

app 
  auth 
    index.tsx 
    login.tsx 
    signup.tsx 
  Explore.tsx
  index.tsx
  _layout.tsx

我的其他文件也在下面分享

我的根index.tsx代码

import { AuthProvider } from "@/contexts/auth.context";
import { Redirect } from "expo-router";

export default function Index() {
  return (
    <AuthProvider>
      <Redirect href="/auth" />
    </AuthProvider>
  );
}

我的 auth/index.tsx 文件是

import { useAuthContext } from "@/contexts/auth.context";
import { Redirect,  } from "expo-router";
import {  Text, View } from "react-native";

export default function Auth() {
  const { loggedIn } = useAuthContext();
  if (loggedIn) {
    <Redirect href="/Explore" />
  }

  return (
    <View>
      <Text>Auth index</Text>
    </View>
  );
}

Answer 1

我能够按照教程解决问题`

https://dev.to/aaronksaunders/expo-router-drawer-navigation-from-the-docs-231k

`