React Native中动态封装Stack.Screen组件报错，如何实现复用？

错误原因 #

React Navigation的Navigator容器仅允许直接放置自身生成的<Stack.Screen>、<Group>或React.Fragment作为子元素，你自定义的<StackScreenCard>不属于合法子元素类型，因此触发报错。此外代码还有两处问题：

• componentName传递的是字符串而非实际组件引用
• options中的title写成了对象{title}，正确写法是直接传字符串值

解决方案 #

方案一：封装通用Header配置（推荐，实现简单） #

无需封装整个Screen组件，仅提取重复的header样式为可复用函数：

1. 创建通用配置文件（如src/common/headerOptions.js）：

export const getCommonHeaderOptions = (title) => ({
  title: title,
  headerTintColor: "white",
  headerTitleAlign: "center",
});

2. 在App.js中导入并使用：

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { getCommonHeaderOptions } from './common/headerOptions';
import HomeScreen from './screens/HomeScreen'; // 导入实际组件

// ...

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="HomeScreen"
      component={HomeScreen} // 传递实际组件
      options={getCommonHeaderOptions("Country City Information")}
    />
    <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
  </Stack.Navigator>
</NavigationContainer>

方案二：封装可复用Screen组件 #

若需封装整个Screen，需确保传递给Navigator的是它认可的Screen组件：

1. 修改StackScreenCard.js，接收外部传入的Screen组件：

const StackScreenCard = ({ Screen, name, component, title }) => {
  return (
    <Screen
      name={name}
      component={component}
      options={{
        title: title,
        headerTintColor: "white",
        headerTitleAlign: "center",
      }}
    />
  );
};

export default StackScreenCard;

2. 在App.js中使用时，传入Stack生成的Screen组件及实际页面组件：

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import StackScreenCard from "./components/ui/StackScreenCard";
import HomeScreen from './screens/HomeScreen'; // 导入实际组件

const Stack = createNativeStackNavigator();

// ...

<NavigationContainer>
  <Stack.Navigator>
    <StackScreenCard
      Screen={Stack.Screen}
      name="HomeScreen"
      component={HomeScreen}
      title="Country City Information"
    />
    <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
  </Stack.Navigator>
</NavigationContainer>

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