“Stack.Navigator”不能用作 JSX 组件

Question

使用反应导航时存在类型问题，当使用Stack.Navigation或Stack.Group来自createNativeStackNavigator

该问题表示JSX.element消息末尾的类型不匹配更具体： Type '{}' is not assignable to type 'ReactNode'

整个消息：

'Stack.Navigator' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: NativeStackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: NativeStackNavigationOptions | ... 1 mo...' is not a valid JSX element.
    Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<NativeStackNavigationEventMap, "transitionStart">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | unde...' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<NativeStackNavigationEventMap, "transitionStart">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | unde...' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/mrcmesen/Novum/ice-app/plant-maintenance/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.ts(2786)

重新进行的方法就是安装这些版本并运行该项目。

"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.1",
"typescript": "^4.6.3"

我的应用程序仍然有效，并且控制台中没有任何错误。我不知道为什么 Stack.Navigator 下有一条红线。但是当我将鼠标悬停在它上面时，它说“Stack.Navigator”不能用作 JSX 组件。

使用 MaterialCommunityIcons 时我也遇到了同样的错误

React-Navigation于 22 年 4 月 12 日更新

这是与版本相关的问题，@types/react您需要将此最低分辨率添加到您的项目中才能解决它：

"dependencies": {
  "@types/react": "^17.0.41"
}

参考：Github 学分：@lucasmds

Answer 1

您将需要修复包的版本@types/react，因为许多反应库都设置了依赖项，@types/react : "*",这将采用最新版本的包。（我想他们刚刚发布了版本 18）

为此，您可以将其添加到您的package.json

如果你使用纱线

"resolutions": {
    "@types/react": "17.0.43"
  }

$ yarn

或者在 npm 中

"devDependencies": {
  "@types/react": "^17.0.41"
}

或者

"devDependencie": {
  "@types/react": "18.0.8"
}

并运行 $ npm install

resolutions您还可以与npm-force-solutions库一起使用

为此，您需要添加到文件script中的部分package.json

"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"

然后做完之后npm install

请参阅 github 问题

Answer 2

这是一个简单的打字错误，可以通过更新 React 打字来解决。

npm install -D @types/react

或者

yarn add -D @types/react

Answer 3

我通过将 @types/react 更新到 18 版本来修复它。

实际上我正在使用“@types/react”：“^18.0.9”。

要更新只需执行以下操作：

npm install -D @types/react