React Native 0.74 Android 环境搭建指南
1. 前言
在搞移动App开发时，咱们有好几种方式可以选，比如原生开发、混合开发、还有H5开发。其中混合开发这块儿，咱们可以用 React Native 加上 Androi d或者 iO 来搞。React Native 这货儿可牛了，它能让开发者们用JavaScript 和 React 来开发那种能在不同平台上跑的移动应用。
这篇文章呢，就是按照官网 0.74 版本的文档，一步步给大家展示怎么搭建 React Native 0.74 的 Android 环境，还分享了一些可能会遇到的坑。最后搞出来的成果就是这个啦！
环境：mac m1、java17、react native 0.74、android sdk 34、ndk 26、Android Studio Iguana | 2023.2.1 Patch 1。
希望这篇文章能帮到大家，让大家在开发移动应用时少走弯路，更加得心应手！
2. 第一步 安装依赖
按照官方指南，选择 macOS、Android 原生构建教程。
需要安装 Node 、Watchman 、React Native 、JDK 、Android Studio ，其中 Node 、React Native 作为编译执行 JavaScript 应用文件， JDK 、Android Studio 编辑器编译打包 Android 应用。
2.1 安装 Node、Watchman
brew install node
brew install watchman # 用于监视文件系统的变化
要确保你的 node 版本是 18，这里安装 node 的话，建议安装 nvm 管理 node 版本，直接切换到 node18。
对于 watchman，你可以通过 brew 来安装。如果你还没安装 brew 这个神器，那就先去搞定它吧，因为后面安装其他依赖也需要用到它。
2.2 安装 JDK
嗨，小伙伴们！我得提醒大家一下，如果你的电脑上有 1.8 版本的 jdk，那你可得小心了。因为 React Native 0.74 的安卓要求 jdk 版本得跟它匹配，不然的话，你运行yarn run android 的时候可能会遇到版本不兼容的报错。
可以通过以下命令查看所有安装的 JDK 版本。
/usr/libexec/java_home -V
Matching Java Virtual Machines (2):
17.0.6 (arm64) "Oracle Corporation" - "Java SE 17.0.6" /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
1.8.0_292 (x86_64) "AdoptOpenJDK" - "AdoptOpenJDK 8" /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
如果没有安装到合适的 版本，可以按照 React Native 官方的命令安装：
brew install --cask zulu@17
# Get path to where cask was installed to double-click installer
brew info --cask zulu@17
如果安装时出现这个错误
No Cask with this name exists."
可以安装 openjdk 的。（Zulu OpenJDK：基于OpenJDK的官方发行版，经过优化和改进，旨在提供更好的性能和稳定性。）
# 安装
brew install openjdk@17
# 链接到 Java Home
sudo ln -sfn /usr/local/opt/openjdk@17/libexec/openjdk.jdk \ ok 12:53:37
/Library/Java/JavaVirtualMachines/openjdk-17.jdk
安装完 JDK 并连接到 JDK Home 后，如果发现在全局命令 java -v 仍不是想要的版本
此时可以使用 jenv 管理 Java 运行版本，类似 nvm。
brew install jenv
# 添加安装的jdk17版本
jenv add /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
# 设置命令行执行的版本
jenv global oracle64-17.0.6
至此 JDK 环境配置成功。
2.3 安装 Android Studio 相关软件
根据官方 Android 教程，安装 Android 编辑器、Android SDK 和 Android 虚拟设备。
Android SDKAndroid SDK Platform 34Android Virtual Device
2.3.1 安卓虚拟设备
2.3.2 配置 ANDROID_HOME 环境变量
为了通过命令行启动模拟器、以及打包 apk 等行为，需要设置 Android_HOME 环境变量。
将以下行添加到您的~/.zprofile 或~/.zshr （如果您使用的bash是 、~/.bash_profile或~/.bashrc）配置文件中
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
运行source ~/.zprofile（或source ~/.bash_profile bash）将配置加载到当前 shell 中。验证是否已通过运行echo $ANDROID_HOME设置ANDROID_HOME，并且是否已通过运行echo $PATH将相应的目录添加到路径中。
3. 第二步 初始化项目
首先删除本地 react-native ，再进行初始化项目。
npm uninstall -g react-native-cli
npx react-native init RNDemo
项目目录结构如下：
然后进入根目录 yarn i ，下载所有 npm 依赖。
4. 第三步 运行项目
执行下面的命令，这个命令的作用就是启动 React Native 服务，然后安装 Android 相关依赖，结合安卓源码和配置进行输出 apk 文件，并把它安装到模拟器里跑起来。
yarn run android
因为要运行安卓系统，所以要安装一些相关的运行依赖。这里依赖需要设置为 google 地址和 aliyun，避免网络问题影响依赖安装。
buildscript {
ext {
buildToolsVersion = "34.0.0"
minSdkVersion = 23
compileSdkVersion = 34
targetSdkVersion = 34
ndkVersion = "26.1.10909125"
kotlinVersion = "1.9.22"
}
repositories {
// 初始化项目的
// google()
// maven { url 'https://maven.aliyun.com/repository/google' }
// 重新设置的
maven { url "https://maven.google.com" }
maven { url 'https://maven.aliyun.com/repository/public/' }
}
dependencies {
classpath("com.android.tools.build:gradle")
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
}
}
apply plugin: "com.facebook.react.rootproject"
这里出现了 ndk 版本对应的错误，需要去 android 编辑器下载对应 ndk，ndk 是属于sdk 的补充工具库，处理跨平台所用。
这里的依赖版本要跟安卓源码下 build.gradle 的声明文件一致。
最后运行 yarn run android 构建打包 debug apk 版本，并安装到模拟器上
5. 第四步 打包 Release 版本
我们要打包出 apk 和 aab 版本，aab 是发布到商店使用的，apk 可以直接作为安装包给 Android 手机使用。
打包大概流程如下：
5.1 应用签名
无论是发布到 Google 商店，还是安装到手机上，都需要对应用进行签名。
之前使用 yarn android 时，会打包构建出一个 app-debug.apk 版本，它是采用了证书文件 debug.keystore 对应用进行签名的。
这样 app 就可以装到模拟器上和手机上。 debug 配置如下
现在我们需要构建发布版本，也就是需要生成发布版本的证书文件。要进入 JDK 目录，生成证书文件。
在 macOS 上，如果您不确定 JDK bin 文件夹的位置，请执行以下命令以查找它：
/usr/libexec/java\_home
它将输出 JDK 的目录，如下所示：
/Library/Java/JavaVirtualMachines/jdkX.X.X\_XXX.jdk/Contents/Home
使用该命令 cd /your/jdk/path 导航到该目录，并使用具有 sudo 权限的 keytool 命令，如下所示。
sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然后把生成的文件 my-upload-key.keystore 重命名为 my-release-key.keystore 拷贝到安卓 app 目录下。（注意，这里的发布证书，因为是测试用，才这样放置的。真正生产上，需要读取外部的文件，避免泄漏，其他人可以拿你的证书冒充签名）
最开始安装官方文档的变量读取，一直遇到这个提示，这里是个坑 ，一直报错找不到 storeFile file 方法
采取的解决方案是：
新建 keystore.properties 文件
# 测试用，真正需要放到全局配置
storeFile=my-release-key.keystore
keyAlias=my-key-alias
storePassword=123456
keyPassword=123456
并重新编写构建配置：
这里需要实例化 keystore.properties ，然后修改 signConfigs 进行读取。值得注意的是，debug 和 release 使用同一个签名，避免在调试时和发布时两者签名不一致，导致相同包无法安装覆盖。
5.2 构建发布版本
使用以下命令，可以生成 release apk 版本
yarn android --mode release
使用以下命令，则生成 aab 版本，可以发布到 google 应用商店
npx react-native build-android --mode=release
最终可以把 apk 安装到手机上，手机系统会进行证书检测认证。
小结
本文通过依赖安装、项目初始化、项目运行、打包签名四个步骤来说明 React Native 0.74 Android 环境的搭建。
对于前端工程师来说，由于缺少原生开发知识，环境搭建的配置难度主要在于 Android 方面。在配置过程中，可以多看看 Android 官网，搞懂其中原理，对于后续开发 Hybrid App 非常有益。
参考资料
转载自:https://juejin.cn/post/7374702793562374194