React Native组件传参及StackNavigator路由组件报错问题咨询

我来帮你一步步拆解并解决这两个问题：

1. 先修复「The component for route 'Foo' must be a react component」报错 #

这个错误的核心原因是你传给StackNavigator的FooScreen不是一个有效的React组件，常见的坑有这几个：

错误场景&修复方案 #

• 组件没有正确导出：
  如果你是用命名导出，导航里要对应使用；更推荐用默认导出避免混淆：

  // FooScreen.js 正确写法
  import React from 'react';
  import { View, Text } from 'react-native';
  
  // 定义一个标准的函数式组件
  const FooScreen = () => {
    return <View><Text>Foo Screen</Text></View>;
  };
  
  export default FooScreen; // 关键：默认导出组件
  

• 导航配置里传错了组件引用：
  不要把组件包装成对象或者其他形式，直接传递组件本身：

  import FooScreen from './FooScreen';
  import { createStackNavigator } from '@react-navigation/stack';
  
  const Stack = createStackNavigator();
  
  function AppNav() {
    return (
      <Stack.Navigator>
        {/* 正确：直接传FooScreen组件 */}
        <Stack.Screen name="Foo" component={FooScreen} />
        {/* 错误示例：不要这么写 */}
        {/* <Stack.Screen name="Foo" component={{ FooScreen }} /> */}
      </Stack.Navigator>
    );
  }
  

2. 在FooScreen中传递并使用自定义Props #

你提到的componentsObject传props失效，应该是没找对正确的传递方式，这里有两种靠谱的方案：

方案一：用initialParams传递导航参数 #

适合传递需要和导航路由绑定的参数，在屏幕内通过route.params获取：

// 导航配置里传参数
<Stack.Screen 
  name="Foo" 
  component={FooScreen} 
  initialParams={{ userName: 'Manspof', userId: 1001 }}
/>

// FooScreen里使用参数
const FooScreen = ({ route }) => {
  // 解构参数，记得做空值处理避免报错
  const { userName = 'Guest', userId } = route.params || {};
  
  return (
    <View>
      <Text>欢迎 {userName}</Text>
      <Text>你的ID是 {userId}</Text>
    </View>
  );
};

方案二：用children直接渲染组件传递Props #

适合传递不需要和路由绑定的自定义Props，直接像普通React组件传参一样：

// 导航配置里用children替代component
<Stack.Screen name="Foo">
  {/* 直接渲染FooScreen并传自定义props */}
  {() => <FooScreen theme="dark" onButtonPress={() => console.log('点击了')} />}
</Stack.Screen>

// FooScreen里直接使用props
const FooScreen = ({ theme, onButtonPress }) => {
  return (
    <View style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
      <Button onPress={onButtonPress} title="点击测试" />
    </View>
  );
};

先把导航的组件报错解决，再用上面的方式传props，应该就能正常工作了！

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