Expo Go渲染错误：Home屏幕component prop需为有效React组件

错误提示："Got an invalid value for 'component' prop for the screen 'Home'. It must be a valid React Component"

用户提供的Home.js代码：

import { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';


export default function Home({ navigation, route}) {
    const [returnedParams, setReturnedParams] = useState(" ");

    useEffect( () => {
        if (route.params) {
            const myParams= route.params;
            setReturnedParams(myParams.sendBackParams);
        }
        
    });

    return (
        <View style={styles.container}>
        <Text >Home Screen</Text>
        <Button title="Go to Details" onPress={ () => {
            navigation.navigate("Details", 
            {details: 'here are some more details about the home page'});
        }

        }></Button>
        <Text>{route.params?.sendBackParams}</Text>
        <Text>{returnedParams}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

你的Home组件代码本身是合法的React组件，这个错误几乎都是导航器路由配置错误导致的，重点检查以下几点：

• 确认导航配置中Home组件的导入与引用
  确保在导航配置文件（比如App.js或专门的导航配置文件）中，正确导入Home组件，并且在Stack.Screen（或对应导航器的Screen组件）中正确指定component属性：

  // 正确示例
  import Home from './Home'; // 根据实际文件路径调整
  
  <Stack.Screen name="Home" component={Home} />
  

• 避免默认导入与命名导入混淆
  你的Home组件是默认导出（export default function Home），导入时不能使用花括号包裹{Home}，否则会导入undefined，直接导致component prop无效：

  // 错误示例
  import { Home } from './Home'; 
  // 正确示例
  import Home from './Home';
  

• 检查文件路径正确性
  确认导入Home组件的路径没有错误，比如Home.js放在screens目录下时，路径应该是./screens/Home，路径错误会导致组件加载失败。

• 检查是否存在导出冲突
  确保Home.js中只有一个默认导出，没有其他同名的命名导出，避免导入时引用到错误的对象。

额外优化建议 #

你代码中的useEffect没有添加依赖数组，会导致组件每次渲染都执行该钩子，建议添加[route.params]作为依赖，减少不必要的重渲染：

useEffect(() => {
  if (route.params) {
    const myParams = route.params;
    setReturnedParams(myParams.sendBackParams);
  }
}, [route.params]);

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