React Native中TS2786等JSX组件类型错误求助

1. 对齐React相关依赖版本 #

这是触发这类错误的最常见原因：@types/react、@types/react-native版本必须和react、react-native核心包版本严格匹配，不能跨大版本。

执行以下命令卸载并安装对应版本的类型包：

npm uninstall @types/react @types/react-native
npm install @types/react@$(npm view react version) @types/react-native@$(npm view react-native version) --save-dev

同时检查是否存在重复依赖：

npm ls react

如果输出多个react版本，清理node_modules后重新安装：

rm -rf node_modules package-lock.json
npm install

2. 修正tsconfig.json核心配置 #

确保tsconfig.json包含以下关键配置，尤其是JSX相关选项：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17+ 推荐使用该值，替代旧的"react-native"
    "jsxImportSource": "react",
    "moduleResolution": "node",
    "target": "ESNext",
    "lib": ["ESNext", "DOM"],
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true, // 跳过第三方库类型检查，避免冲突
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "App.tsx"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

3. 修正组件写法（解决TS2607） #

TS2607通常是因为组件未声明props类型，或传递了未定义的props：

类组件写法 #

必须明确声明props接口（可继承RN内置组件的props类型）：

import React, { Component } from 'react';
import { View, Text, ViewProps } from 'react-native';

// 声明组件props类型，继承ViewProps可复用RN内置属性
interface AppProps extends ViewProps {}

class App extends Component<AppProps> {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello World</Text>
      </View>
    );
  }
}

export default App;

函数组件写法 #

无需强制声明props类型，但如果需要接收props，必须定义类型：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// 无props时直接写函数即可
const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

4. 清理缓存并重启服务 #

React Native缓存和TS语言服务缓存可能导致类型错误残留：

1. 重启React Native Metro服务：

npx react-native start --reset-cache

2. 重启TypeScript语言服务（VSCode中）：
   按Ctrl+Shift+P，选择TypeScript: Restart TS Server

内容的提问来源于stack exchange，提问作者Elidor00