一、前言¶

本教程学习于B站博主“东哥-长乐未央”的 React Native + Expo 项目实战 课程，部分文字描述及贴图也来自于该博主的网站。

若有侵权，请联系删除。

1、Web App 与 原生 App¶

1-1、Web App¶

• 这种类型的 App 简单来说就是写了个网站项目，然后在外面套了个浏览器，一打包成 App，再让用户安装使用。
• Web App 虽然可以像 App 一样安装使用，也可以调用一些硬件设备，但是本质还是Web而已。这种做法性能受限于WebView的渲染能力，用户体验是比较差的。它的优势在于开发成本很低，适合对体验要求不高的简单应用。
• 这里面最有代表性的技术就是uni-app。

1-2、原生 App¶

性能最好的就是原生开发了：
- 开发 iOS，需要用 Swift 或者 Objective-C。
- 开发安卓，要用 Kotlin 或者 Java。
- 开发鸿蒙，则要用 ‌ArkTS。

2、高性能跨平台方案¶

2-1、React Native¶

React Native 是由 Meta 公司出品的跨平台解决方案。它的做法是用 JavaScript 去调用原生组件。

通过使用 React 框架，去调用 Java、Swift 等语言写的原生组件去开发App。因为所使用的组件都是原生的，所以可以达到接近原生的性能。

当然了，React Native 也可以用来开发 Web。

• 在移动端，React Native 支持 iOS、Android。
• 在桌面端，是由微软提供的支持，支持开发 Windows 和 macOS。
• 鸿蒙虽然也可以支持，但目前是由社区在维护。

使用 React Native 的知名项目也挺多的：
- 首先就是 Meta 自己的 Facebook、Ins，它们都是 React Native 开发的。
- 微软的、亚马逊的大量应用也是。
- 还有一些国内用户所熟悉的京东、百度等等，也都使用了React Native 技术来开发。

2-2、Flutter¶

Flutter 基于谷歌自己的 Dart 语言开发，通过自绘引擎实现原生级性能。它不依赖平台的原生组件，而是自己实现了一套跨平台的 UI 渲染方案。

• iOS、Android都是支持的。
• 也支持桌面应用开发。
• 鸿蒙目前同样由社区提供支持。

使用 Flutter 的知名项目也不少，在国内最知名的 Flutter 项目应该是闲鱼了。

Flutter 也存在一些问题：
- 使用 Flutter 要学习 Dart 语言，会增加学习成本，对于前端开发人员来说，最好是前后端、移动端，全都用 JS。
- 而且 Dart 的代码风格不美观。
- 谷歌内部坏消息比较多：开发团队人手不足、bug积压严重、发布延迟，甚至有可能放弃 Flutter 等等。

2-3、其他¶

还有一些其他开发技术，例如 uni-app x，注意，名字后面带个x。这种技术也可以编译成原生应用。也可以同时支持 iOS、Android 和鸿蒙。

但上线的 App 案例基本都是比较简单的小型应用。

二、开发环境搭建¶

1、开发环境对比¶

React Native 的开发环境，有两种。

1-1、React Native 原始环境¶

第一种是 React Native 官网介绍的环境安装：

不推荐使用这种方式安装，原因是：
- 官网的这种方式安装方式太过复杂，先不说别的，就安装这一块，很多人就会被直接劝退。在安装过程中会出现各种奇怪的、难以解决的问题。
- 而且 Windows 无法开发 iOS，只能开发 Android。开发完成后，Windows 也只能发布安卓版本，无法上架到苹果应用商店。macOS 虽然既可以开发 iOS，也可以开发 Android。但是 iOS 必须先花钱购买苹果开发者账号之后，才能真机预览。发布到商店的时候，还要学习 Xcode 的用法，也比较麻烦。
- 所使用的路由，需要自己集成 React Navigation。这东西对新手很不友好，使用起来，配置一层套一层，非常复杂。
- 另外官方提供的组件是比较有限的，开发中用到的其他组件都需要自己到处找，质量难以保证。

1-2、Expo 环境¶

使用 Expo 的方式搭建环境，可以轻松解决上述提到的那些问题。
- Expo 的安装非常简单，一条命令就可以建好项目。
- Windows 也可以开发 iOS，而且可以上架到苹果的 App Store。
- 无论用 Windows 还是 macOS，都无需购买苹果开发者账号，就可以直接用 iPhone 真机预览。
- 自带 Expo Router，它是在 React Navigation 的基础上，又做了封装。大大的简化了配置复杂性，让新手也能轻松上手。
- 自带大量高质量、好用的组件。

2、项目准备与创建项目¶

2-1、安装 Node.js¶

首先确保自己的电脑安装了 Node.js，下载安装地址为 https://nodejs.org/zh-cn/download

Node.js 安装的版本，请使用最新的 LTS 版本。

安装完成后，可以用以下命令是否安装成功，若输出版本号则安装成功：

node -v

2-2、创建项目¶

在终端使用 cd 命令进入项目准备放置的目录，用 npx 命令，就可以直接创建 React Native 项目了，具体创建项目执行的命令如下：

npx create-expo-app@latest

• 它会问我们是否安装 [email protected]，不用输入 y，直接按回车键就行。
• 接着要我们输入项目名称，输入：expo-demo，继续按回车。
• 等待命令运行完成，出现如下图信息，就表示项目创建完成。

• 用 cd 命令进入项目之中：

cd expo-demo

• 然后运行命令启动服务:

npx expo start

// 或者运行
npm run start

• 出现如上图信息表示 Expo 创建的 React Native 项目运行成功。

3、真机预览¶

3-1、iPhone 真机预览¶

使用 iPhone 手机进行预览，进入 App Store 中，搜索 Expo Go 进行下载安装。

确保 iPhone 与电脑连的是同一个 Wi-Fi，是在同一个局域网中的。

用 iPhone 的相机应用扫这个二维码，注意是系统自带的相机。直到底部出现黄色的提示，说在 Expo Go 中打开，点这个就会自动打开 Expo App 了。完成后手机里运行的，正是刚才创建的项目。

此外也可以用iOS系统自带的扫码器App，用这个相对来说更容易扫到一些。

如果一直扫不到，也可以通过命令行中给出的以 exp:// 开头的链接，用 iPhone 自带的 Safari 浏览器直接访问，也可以打开预览。

3-2、Android 真机预览¶

使用 Android 手机进行预览，需要先进入 Google Play 应用商店中，搜索 Expo Go 进行下载安装。

若是下载不了，可以通过以下链接进行获取。通过网盘分享的文件：Expo-Go-2.33.21.apk
链接: https://pan.baidu.com/s/1jLg6rpPHuZDCxxUKzu0GbQ?pwd=4htv 提取码: 4htv

确保 Android 手机与电脑连的是同一个 Wi-Fi，是在同一个局域网中的。

安装好 Expo Go 后，打开并点击 扫码按钮，扫一扫终端命令行中的二维码，就可以预览运行的项目了。

当然，将以 exp:// 开头的链接，复制到安卓手机的浏览器访问，也会自动跳转打开的。

Expo Go 下载补充：
- 可以打开 https://expo.dev/go，点击 Android 模拟器（Android Emulator） 的 安装（Install） 进行 下载（Download）

• 这种方式下载的是 .apk 文件。通过 QQ 或是微信传递到手机上，需要删除 .1 扩展名后，才能安装。

4、模拟器预览¶

4-1、iOS 模拟器 —— macOS¶

iOS 模拟器只能用苹果电脑进行安装，使用 Windows 开发的只能用 iPhone 真机预览开发。

安装 Xcode：
- 在苹果电脑的 App Store 中，搜索 Xcode 进行下载安装。

• 安装过程中，点击同意（Agree），然后输入密码。弹出的新窗口，勾选上 iOS。点击下载和安装（Download & Install）。
  
  

如果已经装过 Xcode，但是之前没勾选 iOS。点击 Xcode 的设置（Setting）。再点击Components，在这里也可以安装。

此外，还需要点击 Locations，这里有个 Command Line Tools，它是 Xcode 的命令行工具。务必要点一下这个下拉框，选择一下，接着会输入密码。完成后，确保底部灰色的这里，显示的是 /Applications/Xcode.app。

使用模拟器：
- 安装完成后，进入创建的 React Native 项目中，运行项目：

npx expo start

// 或
npm run start

-项目启动后，在键盘上按下 i 键。命令行会下载 Expo Go，然后安装到 iOS 模拟器上面：

• 等待下载完成后，会自动打开 iOS 模拟器，里面会自动打开正在运行的项目。

4-2、Android 模拟器 —— Windows¶

Android 模拟器需要先下载安装 Android Studio。

下载完成后直接打开。出来选项保持默认，直接点击下一步：

出来安装路径选择，只要 C 盘放的下，那就保持默认最好，用其他盘需要修改环境变量。然后直接下一步：

点击安装。安装完后，点下一步，点击完成。

出来界面后，点击下一步：

也是选择标准(Standard)的：

选择同意(Accept)，点击完成(Finish)：

耐心的等待跑完，就可以了。Windows 下一样有网络问题，最好是全程开启代理，再来安装。

配置环境变量：
- 打开界面后，先看一下 SDK 安装的位置：

- 这里有个路径，将它选中了，复制一下，一会儿会用到。

- 在电脑环境变量配置页面。在用户变量这里，点击新建：

- 环境变量的名字是：ANDROID_HOME。
- 值是刚才复制的路径，每个人都不同，请不要照抄。我这里是：C:\Users\liu\AppData\Local\Android\Sdk。

- 确定后，找到上面的 Path 这里，点击编辑：

- 再点击新建，增加一个环境变量：值还是刚才复制的地址，后面再加上 \platform-tools。每个人都不同，请不要照抄。我这里是：C:\Users\liu\AppData\Local\Android\Sdk\platform-tools。

- 保存后，关闭命令行后，重新打开命令行，让环境变量生效，运行：

adb --version

• 如果出来版本号了，那就是配置成功了
  

创建模拟器：
再回到 Android Studio 上，点击 More Actions，再点击虚拟设备管理(Virtual Device Manager)：

与 macOS 不同的是，这里没有默认的虚拟机，点击创建虚拟设备(Create virtual device)：

选择一个手机，我这里选择最新的这个 Pixel 9，然后点击下一步：

这里会下载系统镜像，不用选什么，直接点完成(Finish)：

耐心的等待虚拟机下载好，点击完成(Finish)：

启动模拟器：
点击按钮，启动刚才创建的虚拟机：

如果电脑配置比较差，虚拟机启动会非常缓慢，耐心等待一会：

当虚拟机启动后，回到命令行中，运行：

adb devices

如果出现设备了，就是检测到模拟器了。

运行项目：
用 cd 命令，进入创建的 React Native 项目中，运行：

npx expo start

// or
npm run start

启动服务，再按下a键，耐心的等待 Expo Go 下载完毕：

项目就运行起来了：

4-3、Android 模拟器 —— macOS¶

Android 模拟器需要先下载安装 Android Studio。

我这里以 macOS 为例，下载好后，直接打开。

将 Android Studio 拖拽到 Applications 目录中。等一小会后，在 macOS 的启动台中找到， 然后打开。会问，是否帮助谷歌改进 Android Studio，我选择不发送（Don’t send），谢谢。

然后下一步，这里不用改，默认选择的是标准(Standard)的，这个就行：

继续下一步：

勾选同意(Accept)`：

点下面这里后，继续选择同意(Accept)：

点击完成(Finish)，就自动开始下载安装 Android SDK 和模拟器了：

这里也要注意，如果网络环境不好，非常有可能会一直卡住，下载不动。所以，最好是全程开启代理，再来安装。

等跑完后，再点一下完成(Finish)，就会出来这个界面。再

点击 More Actions，再选择 SDK Manager：

Android SDK，就是安卓的开发者工具包。可以看到，我这里已经默认装了一个 SDK 了。

再点击 SDK Tools，可以看到 SDK 的编译工具、Android模拟器、平台工具都默认安装好了。这里我们看看就好，不需要额外安装什么了，直接点击取消(Cancel)。

配置环境变量：
- 接着要将 Android SDK 配置到环境变量。命令行里运行：

// ~，就是当前用户的家目录。
open ~

• 由于配置文件是隐藏文件，是看不见的，接着按快捷键：

command + shift + .

• .也就是键盘上的英文句号，这样就可以显示隐藏文件了。
• 找到.zshrc文件，
  
• 用任意一个你喜欢的代码编辑器打开，继续在最底下，加上：

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

- 改完后，别忘了保存。可以回到访达(Finder)里，再按一次 command + shift + .，不用显示隐藏文件了。

PS：如果你会使用vim命令，可以直接用 vim ~/.zshrc 来修改。

• 完成后运行：

source ~/.zshrc

• 让修改的环境变量生效，运行：

adb --version

• 如果出来东西了，就是 Android SDK 配置好了：
  

启动模拟器：
- 回到 Android Studio，再次点击 More Actions，选择虚拟设备管理(Virtual Device Manage)：

- 里面已经默认装好了一个模拟器了，点击运行按钮：

PS：如果没有默认模拟器，就点加号，自己创建一个

• 模拟器就启动了：
  
• 命令行里，运行：

adb devices

• 可以看到模拟器已经被检测到了：
  

运行项目：
- 在启动 Expo 的命令行中，按下 a 键，耐心的等待 Expo Go 下载完毕：

- 这样就可以运行起来了：

5、Expo 操作指南¶

5-1、默认项目与空白项目¶

使用 npx npx create-expo-app@latest 创建的 expo-demo 是一个默认模版项目，里面包含了很多文件。代码比较复杂，封装的东西，自己的项目中不一定用得上。

在 官方文档 的说明中，表示创建项目的时候，是支持使用 模版（template）参数的。

如果什么也不传，默认就是 default，我们之前建的就是这个，这里面已经包含了很多东西了。

但是对于初学者来说，更好的选择是 blank，也就是空白的。

创建空白模版通过指定模版参数进行创建：

npx create-expo-app@latest --template blank

• 使用 template blank 参数，创建一个空白的 React Naitve 项目
• 项目名字输入：rn-app

PS：如果需要创建 TypeScript 项目，可以使用：npx create-expo-app@latest –template blank-typescript 命令。

用编辑器打开新创建的项目，这次的代码就非常干净了。

• app.json：是整个项目的配置文件，我们后面会对它进行一些配置。
• index.js：是项目的入口文件，在这里引用，并注册了 App 组件。
• App.js：页面文件。

5-2、操作指南¶

启动项目：
- 进入项目目录

cd rn-app

• 运行项目

npx expo start

使用模拟器：i 或 a
- 建议用真机扫码预览
- 在运行项目命令的终端按 i 或 a，打开模拟器。

选择模拟器：shift + i 或 shift + a
- 如果电脑上安装了多个模拟器，可以按 shift + i 或者 shift + a 来选择模拟器。

PS：如果觉得模拟器显示的尺寸太大了，可以拖动屏幕的边缘来调整大小。iOS 模拟器也可用按 command + 1，将模拟器调整成真实设备的大小。

重新加载：r
- 在启动 Expo 的命令行里，按 r 键，就能刷新了。
- 直接在屏幕上按 r 键，也能刷新。但是 Android 模拟器没有这个功能。

调试工具
- 在开发中，免不了要打印调试数据。在代码里，加上：

console.log("打印信息")

• 但很多时候，要调试的数据很多，特别是要打印一些 JSON 数据，在命令行里看就很不方便了。

• 可以到命令行里，按 j 键，就会打开调试窗口。如果同时连了多个模拟器或者真机，这里可以选择调试哪一个：
  

• 可以在控制台里，看到打印的信息了：
  

5-3、菜单说明¶

重新加载：
- 菜单里，第一个是重新加载，这个与在命令行按 r 键是一样的。

回到首页：
- 第二个是回到首页，点击后，就进入Expo的首页了。再点一下clwy-app项目，就又进来了。

性能监视器：
- 命令行里，按 m 弹出菜单。点击显示活动监视器(Show Performance Monitor)。这样顶部就会显示内存占用等等一些信息。点一下，还可以显示更详细的数据。

元素检查器：
- 命令行里，按 m 弹出菜单。点击元素检查器(Show Element Inspector)，这个就和开发 Web 里，浏览器的检查功能类似。

打开调试工具：
- 命令行里，按 m 弹出菜单。JS Debugger，与刚才在命令行里按 J 键效果是一样的，也是打开调试工具的。

禁用快速刷新：
- 最下面的禁用快速刷新(Disable Fast Refresh)，这个推荐不要关闭。默认在修改代码后，只需要按编辑器的保存键，就会自动更新。
- 改完代码后，苹果电脑按 command + s，Windows 按 ctrl + s，保存一下代码，屏幕上会自动更新。