环境说明

  • 主机环境：Windows 11 家庭版 21H2 版本
  • 主机操作系统版本：22000.348
  • Android Studio 版本：Electric Eel | 2022.1.1 Patch 1
  • Node.JS 版本：v18.6.0
  • JDK 版本：openjdk 11.0.19 2023-04-18
  • App 调试运行环境：HUAWEI HarmonyOS 3.0.0
  • 参考：https://reactnative.cn/docs/environment-setup

开发环境配置

必须包含的依赖有 Node、JDK、Android Studio。上述开发环境配置在这里仅作简要阐述，不作详细说明，相关配置问题请查询相关资料。

Node.js

https://nodejs.org/zh-cn

官网下载地址如上，下载对应操作系统安装包安装即可。
推荐安装 Yarn 工具包，在命令行下输入如下指令安装，可代替 npm 功能。

npm install -g yarn
JDK

https://www.oracle.com/java/technologies/downloads/

官网下载地址如上，下载对应操作系统的Java版本并安装，React-Native 推荐使用的版本为11+。安装完成后配置相关环境变量，进入“此电脑-属性-高级系统设置-高级-环境变量”，新建 JAVA_HOME 系统变量，变量值为安装的 jdk 路径，并在 Path 变量中添加如下路径:

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin

由于在 JDK11 之后 JRE 集成进 JDK 中，如果需要配置 JRE 路径，需要进入 JDK 安装路径下执行下述指令封装专用 JRE 目录：

bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre
Android Studio

https://developer.android.google.cn/studio

官网下载地址如上，下载后安装即可。第一次进入会有相关配置，无特殊需求默认即可。接着会有选择 SDK 安装位置，等待安装并结束。结束后配置环境变量，新建系统变量 ANDROID_HOME，路径选择 SDK 安装位置，然后在 Path 变量中添加如下路径：

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

React Native 项目创建

在指定目录中使用 React Native 内建命令行工具创建名为 AwesomeProject 的新项目：

npx react-native init AwesomeProject

如果需要选择指定版本或项目模板可以使用如下指令：

# 指定版本号 需精确到如下版本
npx react-native init AwesomeProject --version X.XX.X

# 指定项目模板 如带 TypeScript 配置版本
npx react-native init AwesomeTSProject --template react-native-template-typescript

编译并运行

进入刚创建的 AwesomeProject 项目目录，即可通过指令编译运行，需要运行模拟器或连接真机调试运行：

yarn android

# 或使用如下指令
yarn react-native run-android

yarn run 如何debug运行_react native

该指令对项目原生部分进行编译，同时在另一个命令行终端中启动 Metro 服务对于 js 代码进行实时打包处理。 Metro 服务可以使用 yarn start 指令单独启动。

项目启动完成即可在模拟器或真机中看到运行的App，在项目中修改App.js并Reload即可看到最新修改。

可能出现的问题

Gradle 下载慢

可选的方案有：

  • 使用更科学的方式下载
  • 在项目路径下settings.gradle文件中修改gradle版本
  • 使用本地已下载的gradle版本
React Native 依赖下载慢

可选的方案有：

  • 使用更科学的方式下载
  • 在项目路径下 build.gradle 文件中添加 aliyun 仓库，阿里云仓库官网地址如下，根据手册添加配置即可:

https://developer.aliyun.com/mvn/guide

  • 配置本地 gradle，在本地 .gradle 路径(默认位置是 C:\Users\用户名\.gradle )中新建一个名为 init.gradle 的文件，内容如下，保存后再次启动 yarn android 即可：
allprojects{
    repositories {
        def ALIYUN_REPOSITORY_URL = 'https://maven.aliyun.com/repository/central/'
        def ALIYUN_JCENTER_URL = 'https://maven.aliyun.com/repository/public/'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('http://repo1.maven.org/maven2')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."
                    remove repo
                }
                if (url.startsWith('https://jcenter.bintray.com/') || url.startsWith('http://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."
                    remove repo
                }
            }
        }
        maven {
            url ALIYUN_REPOSITORY_URL
            url ALIYUN_JCENTER_URL
			url 'https://maven.aliyun.com/repository/google/'
			url 'https://maven.aliyun.com/repository/gradle-plugin/'
        }
    }
 
 
    buildscript{
        repositories {
            def ALIYUN_REPOSITORY_URL = 'https://maven.aliyun.com/repository/central/'
            def ALIYUN_JCENTER_URL = 'https://maven.aliyun.com/repository/public/'
            all { ArtifactRepository repo ->
                if(repo instanceof MavenArtifactRepository){
                    def url = repo.url.toString()
                    if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('http://repo1.maven.org/maven2')) {
                        project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."
                        remove repo
                    }
                    if (url.startsWith('https://jcenter.bintray.com/') || url.startsWith('http://jcenter.bintray.com/')) {
                        project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."
                        remove repo
                    }
                }
            }
            maven {
                url ALIYUN_REPOSITORY_URL
                url ALIYUN_JCENTER_URL
				url 'https://maven.aliyun.com/repository/google/'
				url 'https://maven.aliyun.com/repository/gradle-plugin/'
            }
        }
    }
}