环境说明
主机环境：Windows 11 家庭版 21H2 版本主机操作系统版本：22000.348Android Studio 版本：Electric Eel | 2022.1.1 Patch 1Node.JS 版本：v18.6.0JDK 版本：openjdk 11.0.19 2023-04-18App 调试运行环境：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
该指令对项目原生部分进行编译，同时在另一个命令行终端中启动 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/'
}
}
}
}
参考阅读
您阅读本篇文章共花了：
发表评论