Windows下 react-native 环境配置一次通关不浪费时间版

我的环境	版本	官网建议
Windows	11	-
Node	v22.16.0	18 +
JDK	8、17两个版本	17，高于17可能会遇到问题
Android Studio	2024.3.2.15	-
react-native	0.80.0 @react-native-community/cli	expo

一、 Java JDK 版本切换

经常写前端的都知道node版本切换通过nvm等工具比较方便，其实Java版本也可以切换，打开 设置 > 系统 > 系统信息 > 高级系统设置 > 环境变量 > 系统变量

1. 新建三个变量：

   • JAVA8: 完整JDK 8路径
   • JAVA17: 完整JDK 17路径
   • JAVA_HOME: %JAVA17%

%PATH%这种语法结构被称为环境变量扩展，会在运行时访问百分号中变量名的实际值，CMD 中不区分大小写，但一般使用全大写，切换版本就只需要改变JAVA_HOME指向哪一个

2. 在 Path 中新增，建议放到最顶部
   • %JAVA_HOME%\bin

我遇到了Path中以前设置的一个8版本的变量排在了%JAVA_HOME%\bin前面，然后切换Java版本一直不生效，将%JAVA_HOME%\bin上移到顶部或者删除之前设置的变量即可

3. 然后可通过java -version 或者 javac -version 或者 where java来验证

where java输出结果第一条路径即为当前生效的JDK版本

二、 创建 react-native 项目

只是跑个示例，就没有选择expo

// 如果之前装过全局安装过 react-native-cli、@react-native-community/cli 可能会导致意外问题，所以先卸载
npm uninstall -g react-native-cli @react-native-community/cli

npx @react-native-community/cli@latest init AwesomeProject

// 会启动 Metro 服务，类似于 webpack，使用 Babel 将 jsx 等语法处理为可执行的 js
npm run start

// 新打开一个终端
npm run android

// 报错时执行doctor可以检查缺失依赖项排除故障
npx react-native doctor

三、安装 Android Studio

内存大的可以直接选 Standard，默认是安装在C盘，我这里选择 Custom，安装在D盘，然后一路Next和Finish即可

其余可在网上搜索 Android Studio 安装教程，图文并茂

1. 在环境变量中新建 ANDORID_HOME，值为安装路径D:\Users\Admin\AppData\Local\Android\Sdk
2. 在 Path 中新增
   • %ANDROID_HOME%\platform-tools
   • %ANDROID_HOME%\emulator
   • %ANDROID_HOME%\tools
   • %ANDROID_HOME%\tools\bin

三、配置镜像、代理相关

困住我最久的就是提示Failed to bootstrap Gradle，可以通过配置阿里云、腾讯云的源解决，在项目中android目录下找到/gradle/wrapper/gradle-wrapper.properties文件和build.gradle文件

AwesomeProject/
├── android/     # 包含gradle配置
    ├── gradle/
        ├── wrapper/
            └── gradle-wrapper.properties
    └── build.gradle
├── ios/
├── node_modules/
└── package.json

// gradle-wrapper.properties 文件，配置 Gradle 镜像
-- distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip
++ distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.14.1-bin.zip

// build.gradle 文件，配置 Maven 镜像
buildscripts { 
 ... 省略其余不相干
 repositories {
-- google()
-- mavenCentral()
++ maven { url 'https://maven.aliyun.com/repository/public' }
++ maven { url 'https://maven.aliyun.com/repository/google' }
   google()
   mavenCentral()
 }
}

Android Studio 中配置代理，在File > Settings > Appearance & Behavior > System Settings > HTTP Proxy中选择Manual proxy configuration，会默认选择HTTP，填入IP、端口后，可以点击 Check connection 按钮在弹窗中填入外网地址测试是否代理成功，然后刷新Gradle的同步，会下载很多依赖时间比较久

至此，0.80.0的RN就跑起来了

四、完全卸载 Android Studio

难免遇到需要卸载重装的场景，避免残留信息影响，删除这些文件夹

Users/
├── admin/
    ├── .gradle/                          // 删除
    └── AppData
        ├── Local/
            ├── android                   // 删除
            └── Google
                └── AndroidStudio2024.3   // 删除
        └── Roaming
            └── Google
                └── AndroidStudio2024.3   // 删除

如果换盘符安装的话还需要清理或更新环境变量

1. ANDROID_HOME
2. Path 中
   • %ANDROID_HOME%\platform-tools
   • %ANDROID_HOME%\emulator
   • %ANDROID_HOME%\tools
   • %ANDROID_HOME%\tools\bin