React Native从入门到APK安装

bubucuo
3,965 阅读9分钟

本文很多内容都来自React Native中文与英文官网，在这里整理了下，记录了从环境配置到把APK成功安装到手机上的开发过程。另外，官网上有些指示出现小错误的地方，我在文章中做了修改，也贴了一些我在开发过程中遇到的问题，并加上了很多截图。

从2018年开始写React Native，到近几年去讲React Native的课程，虽然我也吐槽过RN很多次，但是无奈学习RN的人一波接一波，我也很无奈~

本来之前想延续用前年的课件，但是一执行发现，全都不对了~

于是所以这篇2024年的最新教程又诞生了~

正文

React Native 让开发者可以使用 React 来创建适用于 Android 和 iOS 的原生应用。

2013，React Native 诞生于 Facebook的 一个内部的黑客马拉松项目。

2015年，Facebook开源React Native 。

环境配置

文档：reactnative.cn/docs/enviro…

开始一个rn项目前，可以使用expo cli或者rn cli，不过在这之前我们都需要先配置下环境。

安装node

如果你node装过了，这一步跳过。注意检查下版本号，node最好需要12或者12+，你可以使用node -v先检查下版本号。如果低于这个版本，建议升级或者重装。

brew install node

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

选择cli

如果你是个新手，最简单的方式就是用expo cli。expo是个rn的构建工具，它可以让我们快速开始一个rn项目，你可以在web端查看运行效果，也可以用真机或者模拟器查看。

如果你想用react native cli开启一个项目，则需要按照后面的步骤继续安装。

当然，因为网络原因，相较于expo cli，国内使用更多的还是react native cli。

React Native cli

设备

最好选择MacOS，同时支持iOS与Android。

Widnows下不支持iOS。

下面有些包也许你电脑上已经装过了，那直接跳过就行。当然最好记住你跳过了哪些包。因为如果有些配置你是很久以前装的，那么后续运行如果出问题了，则可以先检查是不是有些包太老了，先重装下试试，也许就能解决你的问题。

安装HomeBrew

brew是基于Ruby开发的包管理器。

（粘贴下面代码带终端运行）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

这一步你很可能就卡住了，那换下面镜像安装试试：

/bin/bash -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install.sh)"

安装watchman

brew install watchman

watchman是Facebook的一个开源项目，它可以用来监视文件并记录文件的变更，当文件变更的时候它可以触发一些操作，比如执行一些命令等。

ios环境配置（Mac）

安装Xcode

mac上直接去App store安装即可，注意安装Xcode10或者10+。安装Xcode的同时也可以装上ios模拟器以及其他相关的工具。 xCode非常占内存，所以我去年把xCode卸载了，上周重新安装的时候，提示版本和我的系统版本不符，于是我重装了系统，然后安装了最新的xCode15. 才算成功~

勾选默认的选项进行安装即可。

Command Line Tools

打开Xcode，选择Settings (老版本是 Preferences)，如下图，选择Locations，点击最下面的Command Line Tools，选择最新的Xcode就可以了。

image.png

安装模拟器

和上图一样，选择Platforms，然后安装你选择的模拟器即可。我这里在安装完XCode之后，初次打开就安装上了模拟器。

可以用open -a simulator启动ios虚拟机查看虚拟机安装是否成功，开发时候不需要这个命令，直接使用XCode启动就行。

安装CocoaPods
brew install cocoapods

或者

sudo gem install cocoapods

CocoaPods是用Ruby编写的包管理器，它可以帮助优雅地帮助我们扩展项目。

android环境配置(mac)

注意这里，React Native中英文网在版本上不一致，本教程以最新英文网为准。

安装jdk

推荐使用Homebrew来安装由 Azul 提供的 名为 Zulu 的 OpenJDK 发行版。此发行版同时为 Intel 和 M1 芯片提供支持。在 M1 芯片架构的 Mac 上相比其他 JDK 在编译时有明显的性能优势。

brew install --cask zulu@17

# Get path to where cask was installed to double-click installer
brew info --cask zulu@17

安装 JDK 后，请更新 JAVA_HOME 环境变量。如果你是按照上述步骤操作，JDK 很可能位于 /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

React Native 当前需要 Java Development Kit [JDK] 17，不建议使用更高版本或更低版本，可能会碰到问题。你可以在命令行中输入 javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。

查看JDK安装后的路径

/usr/libexec/java_home -V
1. 安装Android Studio

Android Studio 是开发 Android 应用的官方 IDE，包含构建 Android 应用所需的所有功能。

首先下载和安装 Android Studio，如无法打开链接，请自行搜索可用的下载链接。安装界面中选择"Customize"选项，确保选中了以下几项：

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

2. 安装 Android SDK

在 Android Studio 的欢迎界面中找到 SDK Manager。点击"More Actions"，然后就能看到"SDK Manager"。

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是 Appearance & Behavior* → System Settings → Android SDK。*

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 14 (UpsideDownCake) 选项，确保勾选了下面这些组件（如果看不到这个界面，则需要使用稳定的代理软件）：

  • Android SDK Platform 34
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）或是Google APIs ARM 64 v8a System Image（针对 Apple Silicon 系列机型）或是Google APIs ARM 64 v8a System Image。

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的34.0.0版本。你可以同时安装多个其他版本。

点击"Apply"来下载和安装选中的这些组件。

3. 配置 ANDROID_HOME 环境变量

React Native工具要求设置一些环境变量，以便使用原生代码构建应用程序。

将以下内容添加到你的 ~/.zprofile 或 ~/.zshrc 文件（如果您使用的是 bash，则添加到 ~/.bash_profile 或 ~/.bashrc 文件）中。

~表示用户目录。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

具体操作为：在终端输入**open ~/.zshrc，**然后在弹出的文件里加入以上命令之后，关闭文件即可。

运行 source ~/.zprofile（或者对于bash用户运行 source ~/.bash_profile）来将配置加载到当前的shell中。通过运行 echo $ANDROID_HOME 验证是否已经设置了 ANDROID_HOME，通过运行 echo $PATH 验证是否已经将相应的目录添加到了你的路径中。

请确保使用正确的Android SDK路径。您可以在Android Studio的“Settings”对话框中找到SDK的实际位置，在“Languages & Frameworks → Android SDK”下选择Android SDK。

创建项目

如果你之前全局安装过旧的*react-native-cli命令行工具，请使用npm uninstall -g react-native-cli*卸载掉它以避免一些冲突。（我以前就装过，所以我先卸载了~）

执行以下命令，创建lesson1的项目：

npx react-native@latest init lesson1

注意一：请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。

注意二：0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的依赖安装步骤卡很久（命令行停在 Installing CocoaPods dependencies），请务必使用稳定的代理软件并确定其配置对命令行有效。

创建成功的截图：

如果此过程中CocoaPods安装失败，则接下来在ios目录下执行如下命令再手动安装即可~

cd ios
bundle exec pod install --verbose

初始项目结构如下：

展开ios与android如下图所示：

启动ios端

cd lesson1
npx react-native run-ios 或者 yarn ios

启动android端

cd lesson1
npx react-native run-android 或者 yarn android

刷新

ios与android启动之后，会公用这样一个终端窗口。

很多情况下自动刷新并不能顺利实施，如使用导航的时候。如果碰到任何界面刷新上的问题，请尝试手动刷新。具体的操作就是在下面这个窗口上点击“r”按键。也可以在 iOS 模拟器中按下点击Reload。

开始coding

这里省略一些具体的RN API与调试方法，否则篇幅太多了，具体大家可以参考RN官网或者一些教程。 接下来我们来说发布~

image.png

打包发布

reactnative.cn/docs/signed…

1. 生成密钥

在终端输入以下命令：

eytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2. 将生成的keystore文件放到android/app目录下

3. 在android/gradle.properties目录中配置全局变量

注意用你刚刚在第一步设置的密码

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore

    MYAPP_RELEASE_KEY_ALIAS=my-key-alias

    MYAPP_RELEASE_STORE_PASSWORD=123456

    MYAPP_RELEASE_KEY_PASSWORD=123456

4. 把签名配置加入到项目的 gradle 配置中

编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：

...
    android {
        ...
        defaultConfig { ... }
        signingConfigs {
            release {
                if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                    storeFile file(MYAPP_RELEASE_STORE_FILE)
                    storePassword MYAPP_RELEASE_STORE_PASSWORD
                    keyAlias MYAPP_RELEASE_KEY_ALIAS
                    keyPassword MYAPP_RELEASE_KEY_PASSWORD
                }
            }
        }
        buildTypes {
            release {
                ...
                signingConfig signingConfigs.release
            }
        }
    }
    ...

5. 生成发行 APK 包

cd android
./gradlew assembleRelease

生成的 APK 文件位于android/app/build/outputs/apk/release/app-release.apk，它已经可以用来发布了。

安装到安卓手机上

不同手机表现不同，这里以华为、鸿蒙4为例（不支持微信直接传输APK安装的方式），接下来通过mac连接手机数据线的方式安装：

手机连接数据线之后，在电脑终端执行：

adb devices
adb install -t app-release.apk

注意这里的apk路径，我这里是在android/app/build/outputs/apk/release/下执行的命令，所以直接写了apk

如果你是在其它路径下，记得加上相对路径

在执行adb devices的时候，如果电脑上开着其它模拟器，会干扰。所以这个时候建议把电脑上其它模拟器关闭。

华为手机上安装之前需要确认并输入密码，选择”相信“，继续操作即可~

最后

RN开发有点费电脑，需要配备散热器，京东上三十多块的就行~

avatar
文章
阅读
粉丝