“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} />

Answer 2

在我的例子中，我使用 createNativeStackNavigator 来创建嵌套路由

<MonthlyStack.Navigator screenOptions={{ headerShown: false }} initialRouteName={NavigationKeys.MonthlyOne}>
        <MonthlyStack.Screen name={NavigationKeys.MonthlyOne} component={MonthlyScreen} />
</MonthlyStack.Navigator>

要解决此问题，请将导航类型 def 传递给

const MonthlyStack = createNativeStackNavigator<NavigateRoot>();

“NavigateRoot”是否有路由参数定义 例如

export type NavigateRoot = {
  Login: {
    nextRoute?: NavigationKey | undefined;
    institutionId?: string | undefined;
    header?: string | undefined;
    subHeader?: string | undefined;
  };
Home: undefined
}