Expo Router 警告布局子项必须是 Screen 类型

Question

嗨，我是 React Native 的新手，我正在尝试创建一个示例登录屏幕。

这是有效的，当应用程序开始显示登录屏幕时，如果单击按钮，则会向我发送另一个屏幕视图，但我在控制台上收到此警告：

布局子项必须是 Screen 类型，所有其他子项都将被忽略。要使用自定义子项，请创建自定义 .更新布局路线：“app/_layout”

我的代码是这样的：

_layout.tsx

import blablabla


SplashScreen.preventAutoHideAsync();

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

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

  if (!loaded) {
    return null;
  }

  const isAuthenticated = false; 

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        {isAuthenticated ? (
          <>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="+not-found" />
          </>
        ) : (
          <>
            <Stack.Screen name="(login)" />
            <Stack.Screen name="+not-found" />
          </>
        )}
      </Stack>
    </ThemeProvider>
  );
}

我有 2 个索引，一个用于（登录），另一个用于（选项卡）。我尝试更改 _layout 并将此代码发送到另一个文件（如索引）中，但不起作用，同样的警告。

有什么想法吗？感谢您的任何帮助或评论，抱歉英语简短。

Answer 1

import { useEffect } from 'react';
import { useColorScheme } from 'react-native';
import { ThemeProvider } from 'some-theme-provider';
import { Stack } from 'some-navigation-library';
import SplashScreen from 'some-splash-screen-library';
import { useFonts } from 'some-font-library';

SplashScreen.preventAutoHideAsync();

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

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

  if (!loaded) {
    return null;
  }

  const isAuthenticated = false; 

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        {isAuthenticated ? (
          <>
            <Stack.Screen name="tabs" options={{ headerShown: false }} />
            <Stack.Screen name="not-found" />
          </>
        ) : (
          <>
            <Stack.Screen name="login" />
            <Stack.Screen name="not-found" />
          </>
        )}
      </Stack>
    </ThemeProvider>
  );
}

上面的编辑就可以解决问题，这里的主要问题是您给出的选项卡名称不正确。