'Element' 不可分配给类型 'ScreenComponentType<ParamListBase, "Home"> | 未定义 - React Native 上的 React 导航

Question

我正在尝试在 React Native 应用程序上使用 React Navigation 创建我的堆栈导航器。

我有我的 HomeTab 组件，就是这样的代码：

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';

const Stack = createNativeStackNavigator();

export const HomeTab = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={<HomeScreen />} />
  </Stack.Navigator>
);

然而，组件道具突出显示为红色：

出现以下错误：

 'Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined

我该如何解决这个问题？

Answer 1

解决方案非常简单。

React Navigation 不需要一个元素（JSX 表达式），而是一个 React 组件。

要解决此问题，请删除组件中的 < />：

<Stack.Screen name="Home" component={HomeScreen} />