React Native报错：期望字符串/类/函数却得到undefined，求帮助

错误根源 #

你遇到的Element type is invalid错误，核心原因是LoginScreen中使用了React Native不存在的Layout组件。这是把Flutter的布局习惯带到React Native里导致的——React Native没有Layout这个核心组件，应该用View来实现布局逻辑。

修复步骤 #

1. 修正组件导入 #

修改AuthStack.js的导入语句，移除不存在的Layout：

// 原代码
import { View, Text, Button, StyleSheet, Layout, Image } from "react-native";
// 修改后
import { View, Text, Button, StyleSheet, Image } from "react-native";

2. 替换布局组件 #

把LoginScreen里的<Layout>换成<View>，并将布局属性移到style中：

// 原代码
<Layout flexDirection='row'>
    <Image source={require('../../assets/icon.png')}/>
    <Text>GLOBE</Text>
</Layout>
// 修改后
<View style={{flexDirection: 'row'}}>
    <Image source={require('../../assets/icon.png')}/>
    <Text>GLOBE</Text>
</View>

额外优化点 #

• App.js中的useEffect缺少依赖数组，会导致重复执行，建议添加空数组限定执行时机：

useEffect(() => {
    console.log(session);
    setAuth(session);

    supabase.auth.onAuthStateChange((_event, session) => {
        console.log(session);
        setAuth(session);
    });
}, []); // 空数组确保只在组件挂载时执行一次

• 状态变量setLoating拼写错误，应为setLoading，避免后续逻辑出现异常。

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