React Native TSX报错：Module 'react-native'无StyleSheet导出成员

架构老林

2026-8-13

解决React Native TSX文件无法识别基础元素的问题

核心原因

缺少适配当前React Native版本的@types/react-native类型定义包，且React版本与React Native版本存在兼容冲突，导致TypeScript无法识别RN的API类型。

具体解决步骤

1. 安装对应版本的`@types/react-native`

React Native 0.69.6需要搭配0.69.x版本的类型定义包，执行以下命令：

npm install --save-dev @types/react-native@0.69.x
# 或使用yarn
yarn add -D @types/react-native@0.69.x

2. 调整`@types/react`版本以适配RN 0.69.6

RN 0.69.x官方默认适配React 17.x，你当前使用的React 18.0.0与该版本RN的类型定义存在兼容问题，建议降级@types/react：

npm install --save-dev @types/react@17.0.50
# 或使用yarn
yarn add -D @types/react@17.0.50

3. 清除项目缓存

清除Metro缓存：

npx react-native start --reset-cache

删除node_modules、package-lock.json（或yarn.lock），重新安装依赖：

rm -rf node_modules package-lock.json
npm install

若项目根目录存在.tsbuildinfo文件，直接删除它以清除TypeScript缓存。

4. 检查`tsconfig.json`配置

确保配置文件包含正确的React Native类型相关设置，示例配置如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}