如何在Google IDX中搭建纯React Native环境（无Expo CLI）及转JS配置

步骤1：初始化纯React Native项目 #

• 打开IDX终端，执行初始化命令：

  npx react-native init PureRNProject
  

  （若需要TypeScript模板，添加--template react-native-template-typescript参数）
• 进入项目目录：

  cd PureRNProject
  

步骤2：配置IDX内置模拟器 #

• 打开IDX左侧边栏的「Emulators」面板，点击「Add Emulator」
• 选择Android或iOS模拟器（iOS需确保IDX已加载iOS运行环境）
• 启动模拟器后，在终端运行对应平台命令：

  # Android
  npx react-native run-android
  # iOS
  npx react-native run-ios
  

• 若Android模拟器报错，先配置SDK路径：

  echo "export ANDROID_SDK_ROOT=/usr/local/android-sdk" >> ~/.bashrc
  source ~/.bashrc
  

步骤3：验证环境 #

• 模拟器加载完成后，确认App正常运行
• 修改App.js（或App.tsx）内容，检查热重载是否生效

步骤1：清理Expo相关依赖与配置 #

• 卸载Expo包：

  npm uninstall expo expo-cli @expo/webpack-config expo-modules-core
  

• 删除Expo配置文件：

  rm app.json eas.json expo-env.d.ts
  

• 打开package.json，删除所有expo开头的脚本和依赖项

步骤2：安装纯React Native核心依赖 #

• 安装RN基础包：

  npm install react-native react-native-cli
  

• 处理原生依赖：

  # iOS
  npx pod-install
  # Android
  cd android && ./gradlew clean && cd ..
  

步骤3：转换TSX文件为JS #

• 重命名所有.tsx文件为.js（例如App.tsx → App.js、index.tsx → index.js）
• 删除TypeScript配置文件：

  rm tsconfig.json tsconfig.node.js
  npm uninstall @types/react-native typescript
  

• 移除文件中的TypeScript语法（类型注解、接口定义等），示例：
  原TSX代码：

  import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  interface AppProps {
    title: string;
  }
  
  const App = ({ title }: AppProps) => {
    return (
      <View style={styles.container}>
        <Text>{title}</Text>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
  });
  
  export default App;
  

  转换后JS代码：

  import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  const App = ({ title }) => {
    return (
      <View style={styles.container}>
        <Text>{title}</Text>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
  });
  
  export default App;
  

步骤4：配置运行 #

• 在终端执行启动命令：

  npx react-native run-android
  # 或
  npx react-native run-ios
  

• 在IDX「Run and Debug」面板创建新的React Native运行配置，指定对应启动命令

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