React Native：'Component' 不能用作 JSX 组件。类型“{}”不可分配给类型 'ReactNode'
React Native: 'Component' cannot be used as a JSX component. Type '{}' is not assignable to type 'ReactNode'
我刚开始一个新项目，但我在使用各种包时遇到以下错误，例如 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-components 中的 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)
将 @types/react 添加到 package.json 中的 resolutions 修复了它：
"resolutions": { "@types/react": "17.0.43" }
npm update
它对我有用，但我不知道为什么。
我刚开始一个新项目，但我在使用各种包时遇到以下错误，例如 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-components 中的 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)
将 @types/react 添加到 package.json 中的 resolutions 修复了它：
"resolutions": { "@types/react": "17.0.43" }
npm update
它对我有用，但我不知道为什么。