React Native+Expo-Router出现element invalid错误，求排查

核心错误点 #

• 无效JSX结构：Expo Router的Stack.Navigator仅允许Stack.Screen作为直接子元素，你在Stack.Navigator内部额外嵌套了一层<Stack>标签，这是React无法识别的无效元素，直接触发「element invalid」错误。
• 冗余状态判断：代码中重复判断!fontsLoaded的场景，逻辑冗余且无意义。
• 副作用代码位置错误：SplashScreen.preventAutoHideAsync()直接写在组件外部，属于未受控的副作用，应该放在useEffect内执行，避免组件未初始化时的异常。

修正后的代码 #

import { StyleSheet, Text, View } from 'react-native'
import { SplashScreen, Stack } from 'expo-router';
import { useFonts } from "expo-font";
import { useEffect } from 'react';

const RootLayout = () => {
  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
  });

  useEffect(() => {
    // 将SplashScreen控制逻辑移到useEffect内
    const initSplash = async () => {
      await SplashScreen.preventAutoHideAsync();
    };
    initSplash();

    if (error) throw error;

    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  // 合并加载状态判断逻辑
  if (!fontsLoaded || !error) {
    return null;
  }

  return (
    <Stack.Navigator>
      {/* 移除多余的<Stack>包裹层 */}
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="(auth)" options={{ headerShown: false }} />
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen name="procura/[query]" options={{ headerShown: false }} />
    </Stack.Navigator>
  )
}

export default RootLayout;

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