React Native 环境部署 & 新建项目(Windows 2024)

前言

搜了各种资料自学的，所以还是挺值得分享下！包能跑通运行的！！

资料参考：

react-native官网（中文网）：搭建开发环境 · React Native 中文网

react-native官网（外网）：Get Started with React Native · React Native

git hub：看社区解决方案，主要解决bug了

整体流程：环境配置 -> 初始化项目 -> 修改项目文件 -> 启动项目

1、环境配置

开发环境：Windows 10（intel）

2.1 目录

需要：Node.js、npm、yarn、JDK、Android Studio、Git、proxy（代理）

1、Node.js：v20.17.0（最新稳定版） - 运行时服务器

2、npm：10.8.2 - 包管理器

3、yarn：1.22.22 - 包管理器

4、JDK（三个版本）：JDK-17、JDK-21、JDK-1.8

5、Android Studio：2024.1.2 - 安卓开发

小细节

nrm：建议安装，切换 npm 国内外仓库（有用到）

yarn：可能需要 yarn 设置国内仓库镜像（可能有用）

Git：可能是需要安装配置好（无Git，好像会报错，新建npx react-native cli 时的模版问题）

JDK：自行搜索多版本配置，此处 JAVA_HOME 使用 JDK-17

2.2 Android Studio

主要：环境变量设置

1、基本安装

安装就无脑下一步，几个注意点：

1、导入配置不用管（如果有可以导入）

2、出现代理不要配置，直接Cancel

3、SDK位置可以修改，记住！！后面会用（重要）

4、默认安装SDK，之后在settings里面安装配置（参考下面AS Settings 1-3）

5、不要开启windows的Hyper-V技术

AS Settings 1

SDK Platforms： API 35 ，34、33、31（随时下载，主要得有 35、34）

AS Settings 2

SDK Tools：按照官网要求 - 必须有下面这些

#RN需求必须安装
Android SDK Build-Tools 34
Android SDK Command-line Tools
Android Emulator
Android SDK Platform-tools

AS Settings 3

Show Package Details点上，可以下更多的不同版本

2、环境变量配置（最重要）!!!

RN 是通过环境变量找 Android Studio 的，所以一定配置好环境变量

1、ANDROID_HOME （必须）

在系统变量中添加：

ANDROID_HOME
D:\environment\Android\Sdk #值是安装Android Studio SDK设置的地址，没设置别的就找默认地址

2、ANDROID_HOME 衍生（必须）

在系统变量path中添加：下面四条

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

3、GRADLE_USER_HOME（非必须，gradle本地仓库地址，节省空间）

GRADLE_USER_HOME
D:\environment\gradle-repo

2、初始化项目

主要分享：最新的 CLI （脚手架）创建项目方式，官网截止至2024-10-4

官方初始化：

方式一：完整原生环境（本文使用）

方式二：沙盒环境 expo（按照外网流程，一步一步就OK，简单）

参考：

@react-native-community/cli - Git：GitHub - react-native-community/cli: The React Native Community CLI - command line tools to help you build RN apps

官方git，有版本对照关系，比如 react-native-community/cli ^14.0.0 -- react-native ^0.75.0

官方命令：

# step 1：先删除可能有的rn-cli和rn-community/cli,因为现在用npx，不需要污染本地库
npm uninstall -g react-native-cli @react-native-community/cli

# step 2：输入命令，新建最新的RN项目
npx @react-native-community/cli@latest init <projectName>

# 如果需要指定版本
npx @react-native-community/cli@latest init <projectName> --version x.xx.x

常见报错（网络问题）

报错 1：fetch failed

报错 2：Invalid Version：latest

解决：

1、目标文件夹的当前用户编辑权限需要开启

2、操作前使用命令清理缓存

 # 清理下两个仓库的管理工具
 npm cache clean --force
 yarn cache clean

3、切换npm仓库（其实都能成功，taobao镜像快点）

 # nrm切换
 nrm use taobao
 nrm use npm

4、及时终止，再次尝试

 # 短时间内，看不到下方的图片，终止操作，清理缓存，再次输入新建命令
 ctrl + c

5、代理（不确定）

如果上面1-4没解决问题，使用代理，不一定快，也有可能出现别的问题。

成功的样子：

3、修改项目文件

需要修改几个项目文件，修改gradle下载仓库和仓库镜像

目标文件地址

进入项目文件夹，修改下列几个文件

~android/gradle/wrapper/gradle-wrapper.properties

~android/settings.gradle

~android/build.gradle

1、gradle-wrapper.properties

下载gradle的地址

# distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.8-all.zip

2、settings.gradle

全局gradle配置

pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
rootProject.name = 'zsfinal3'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')

// 这里是新加的，国内镜像源
dependencyResolutionManagement {
    // 模式：FAIL_ON_PROJECT_REPOS > PREFER_SETTINGS
    // repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin'}
        mavenLocal()
        google()
        mavenCentral()
    }
}

3、build.gradle

项目gradle配置，添加至文件repositories{ }里面

maven { url 'https://maven.aliyun.com/repository/central' }
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin'}
mavenLocal()
gradlePluginPortal()

4、启动项目

进入项目文件夹，运行

yarn android

1、第一次下载android项目需要的包，时间会比较长（我接近1小时）

2、如果中间出现错误停止下载，请处理完后再次启动

3、下载完成启动后，可能出现emulator的问题

最常见报错

下载项目包文件的时候可能会报错，主要介绍一个最常见的

报错：Error Resolving plugin [id:’com.facebook.reat.settings’]

解决办法：

1、首先清除缓存

 # 终端输入
 yarn cache clean

2、 关闭相关已启动的内容（模拟器、metro、终端）

3、到项目根文件夹，删除node_modules

4、再次开启终端，执行yarn install安装node_modules

 yarn install

5、不在报错，开始下载包

emulator报错

关于模拟器报错

1、Could not connect to development server

解决：

不要在运行的时候用任何代理，url变了

非要使用代理请使用命令

# 使用固定的host启动，取代yarn android
yarn react-native start --host 127.0.0.1

2.Unable to load script

解决：

我也不太清楚怎么解决的，尝试了在Android Studio settings里面下载了关于Platform34和SDK34的内容，并且又新建了一个模拟器，使用SDK34，解决。之后有具体方法可以补齐

其他方式

1、使用EXPO，也是一种建项目的方式，比较简单，成功！！

2、使用指定版本命令新建项目，成功！！

3、使用老命令，建立低版本（命令要弃用了2024-12），成功！！

4、官网（外），分解步骤建立，没尝试，太复杂

5、总结

关于代理：全程基本不用，用了反而容易出错误

流程：环境配置 -> 初始化项目 -> 修改项目文件(国内) -> 启动项目

资料查找：官网（国内外）、git hub、AI tools、csdn...