如何不使用Expo与TypeScript构建React Native应用并解决报错

方法一：直接创建纯JS项目 #

使用react-native init时指定官方纯JavaScript模板，避免生成TypeScript或Expo相关内容：

npx react-native init appName --template react-native-template-basic

这个模板是官方提供的基础纯JS模板，生成的项目仅包含React Native核心依赖，无TS配置和Expo相关内容。

方法二：改造已生成的TS项目 #

如果已经用默认react-native init生成了TypeScript项目，按以下步骤转为纯JS：

• 删除TypeScript相关依赖与配置文件：
  1. 移除package.json中的typescript、@types/react、@types/react-native依赖项
  2. 删除根目录下的tsconfig.json、jest.config.js（若为TS配置版本）、原App.tsx文件
• 创建新的App.js文件，写入纯JS代码示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello React Native (Pure JS)</Text>
    </View>
  );
};

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

export default App;

• 确认index.js中的导入路径为import App from './App';（删除App.tsx后会自动指向App.js）
• 重新安装依赖并清除缓存运行：

npm install
npx react-native start --reset-cache
npx react-native run-android # 或 run-ios

关键注意点 #

• 不要使用npx create-react-native-app，该命令默认生成Expo管理的项目，即便使用--template bare-minimum也不如官方纯JS模板直接
• 直接重命名App.tsx到App.js报错的核心原因是项目仍残留TS配置（如tsconfig.json），React Native会优先识别TS相关规则，必须清理所有TS配置文件才能正常运行纯JS项目

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