React Native：“组件”不能用作 JSX 组件。类型“{}”不可分配给类型“ReactNode”

Question

我刚刚开始一个新项目，但我在各种包中遇到以下错误，例如 React Native Reanimated 和 React Navigation Stack。

这是我的package.json。

{
  "name": "foodmatch",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "prepare": "yarn husky install",
    "lint": "yarn eslint --ext .tsx --ext .ts src/ --fix",
    "format": "yarn prettier --write ./src"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --ext .tsx --ext .ts src/ --fix"
    ],
    "./src/**": [
      "prettier --write ./src"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "expo": "~44.0.2",
    "expo-app-loading": "~1.3.0",
    "expo-font": "^10.0.5",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-web": "0.17.1",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "@types/styled-components-react-native": "^5.1.3",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^8.13.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.8",
    "prettier": "^2.6.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

这是错误。

'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?: StackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | und...' is not a valid JSX element.
    Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<StackNavigationEventMap, "transitionStart">; ... 7 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined;...' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<StackNavigationEventMap, "transitionStart">; ... 7 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined;...' 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("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

我有一个具有相同包和配置（babel、eslint 等）的项目，它工作正常，它看起来像一个类型错误，因为该项目按照预期工作，但 IntelliSense 声明了这些错误。

当我尝试将其中一个组件与样式组件中的 Styled() 一起使用时，我还会得到以下信息。

No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, DefaultTheme, any, any>', gave the following error.
    Argument of type 'typeof Text' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof Text' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof Text' is not assignable to type 'string'.
  Overload 2 of 2, '(component: ComponentType<any>): ThemedStyledFunction<ComponentType<any>, DefaultTheme, {}, never>', gave the following error.
    Argument of type 'typeof Text' is not assignable to parameter of type 'ComponentType<any>'.
      Type 'typeof Text' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'contextType' are incompatible.
          Type 'React.Context<any> | undefined' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").Context<any> | undefined'.
            Type 'React.Context<any>' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").Context<any>'.
              The types of 'Provider.propTypes' are incompatible between these types.
                Type 'React.WeakValidationMap<React.ProviderProps<any>> | undefined' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").WeakValidationMap<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ProviderProps<any>> | undefined'.
                  Type 'React.WeakValidationMap<React.ProviderProps<any>>' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").WeakValidationMap<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ProviderProps<any>>'.
                    Types of property 'children' are incompatible.
                      Type 'React.Validator<React.ReactNode> | undefined' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").Validator<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode> | undefined'.
                        Type 'React.Validator<React.ReactNode>' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/prop-types/index").Validator<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode>'.
                          Type 'React.ReactNode' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
                            Type '{}' is not assignable to type 'ReactNode'.ts(2769)

Answer 1

将

@types/react

添加到 package.json 中的

resolutions

修复了它：

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

• https://github.com/react-navigation/react-navigation/issues/10507
• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59765#issuecomment-1092891129

Answer 2

我添加了以下依赖项，它解决了问题：

"@types/react-dom": "17.0.14",
"@types/react": "~18.0.0",
"@types/react-native": "~0.69.1",

https://github.com/eslint/eslint/issues/15802#issuecomment-1205018068

Answer 3

感谢@RezaBabaei。

对我来说，解决办法是不在

resolutions

中。我的问题是：

我的

"@types/react"

位于

"~17.0.21",

我的

"react":

位于

"17.0.1",

他们需要匹配。

一旦我将

"@types/react"

设置为匹配

"~17.0.1",

的反应并运行

install

。它立即解决了我的问题。我也可以只更新两者。其他解决方案都不适合我

Answer 4

“决议”：{ “@types/react”：“17.0.43” },

将其添加到 package.json

删除（节点模块）并再次yarn或npm install

Answer 5

只需对 @types/react 使用相同的版本并做出反应

“@types/react”：“18.2.0”，

“反应”：“18.2.0”，

如果它有效，那就太棒了，否则也添加

package.json 中的“决议”：{“@types/react”：“18.2.0”}

Answer 6

以下步骤帮助我解决了这个问题：

1. 在

   compilerOptions

   的

   tsconfig.json
中添加以下内容

"paths": { "react": ["./node_modules/@types/react"] }

2. 在

   compilerOptions

   的

   jsconfig.json
中添加以下内容

"jsx": "react-native"

3. 在

   package.json

   中添加以下内容（用您的反应版本替换值）

"resolutions": { "@types/react": "^17.0.38" }