React Native编写Android和iOS原生应用

前端是个广义的概念，前端是离用户最近的一端，Web前端，移动端，桌面端等等。一套代码，多端公用，这已不是新鲜事，许多框架都在努力构建着大前端的未来，RN也是如此，从Web前端开发平滑步入桌面前端和移动前端原生应用软件开发。

现如今，不管是什么框架都会提供在Node环境运行的命令行工具，RN也不例外。如果你已经是移动端开发的老司机，使用 npm i -g react-native 指令安装 react-native 命令行工具。如果你和我一样没有完整的做过移动端项目，不妨使用 npm i -g expo-cli 指令安装 Expo CLI。Expo CLI包含一系列围绕构建 React Native 项目的工具。

npm install -g expo-cli

安装好 Expo CLI 后，试着在终端执行 expo init -h。init 是 Expo CLI 的其中一个指令，初始化项目的缩写是 expo i，添加 -h 选项就能看到 init 指令的帮助手册。

expo init -h

------------
下面是终端输出
------------

Usage: init|i [options] [project-dir]

初始化项目的目录，可以指定目录位置，默认在执行命令的目录创建项目目录。

Options:

  -t, --template [name]           指定模版，官方自带的可直接使用的模版包括："blank", "tabs", "bare-minimum"，可使用 npm 安装其他模版
  --npm                           指定用 npm 安装模块依赖，如果没有安装 yarn 则默认会使用 npm 安装依赖模块
  --yarn                          如果你安装了 yarn，则默认使用 yarn 安装依赖模块
  --workflow [name]               即将废弃
  --name [name]                   应用首屏显示的名称
  --android-package [name]        指定安卓应用的包名
  --ios-bundle-identifier [name]  指定iOS应用打包标志符
  -h, --help                       帮助手册，也就是这里的内容

按照官方文档示例，执行 expo init AwesomeProject 命令后就会在你执行命令的目录创建名为 AwesomeProject 的目录。如果你要创建自定义的目录名称或目录层级，可以这样做：

expo i name_one/name_two/test_project
或者
expo i name_one/name_two/test_project/

上面代码会在当前目录创建 name_one 目录，在 name_one 目录里创建 name_two 目录，真正包含项目文件的目录是 test_project，它包裹在 name_two 目录内。学习阶段没必要把事情搞得这么复杂，按官方的示例命令执行创建 AwesomeProject项目目录：

expo init AwesomeProject

然后你会被问三个问题：

• 选择一种 Expo 自带的 RN 项目模版
• 使用哪个依赖模块管理工具，如果安装了 yarn 则默认用 yarn
• 输入应用名称，名称会出现在应用首屏主页上

现在还不知道 slug 是做什么的，但是知道了 slug 和项目文件所在的目录名称一样，类似包名。

进入项目目录，执行：

cd awesomeProject
expo start

顺利启动服务器。接下来在安卓设备或 iOS 上安装 Expo 应用程序。安卓设备从 Google Play 下载 Expo。iOS 设备从 App Store 下载 Expo。两个应用的界面和操作大致相同，只是连接 RN 应用的方式有些不同。左边是安卓设备上安装的 Expo 应用，右边是 iOS 设备上安装的 Expo 应用。

在安卓设备上，点击 Expo 应用的 Scan QR Code 按钮，对着网页或终端上的二维码扫描，可以其中 React Native 创建的示例应用程序。在 iOS 设备上，直接打开设备自带的相机去扫描二维码，根据相机中弹出的浮动提示消息，打开 Expo 并运行 React Native 创建的示例应用程序。

打开项目中的 App.js 文件，这就是 RN 应用的入口，试着修改 JSX 代码，安卓设备和 iOS 设备上运行的 RN 应用会实时地更新，这都是 Expo CLI 在起作用。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

简单的学会了用 Expo CLI 创建 RN 应用，下面使用 React Native 内建的命令行创建 RN 应用。依然使用 AwesomeProject 这个名称所谓项目目录，但为了防止目录名冲突，先把刚才用 Expo CLI 创建的项目目录删除，直接使用 npx 执行创建项目的指令：

npx react-native init AwesomeProject

安装 cocoapods 最花时间，大概过去3-4分钟才把项目目录初始化出来。

我已经提前安装好了 Android Studio 和 Xcode 两个软件。我打算先折腾 React Native 在安卓设备上的工作流程，因为上大学那会儿折腾 Android Studio 做过一个钢琴🎹应用，虽然4年过去了，没有及时记录下来，所以早已经忘了具体怎么实现的，但是比折腾 Xcode 更有把握一些，所以我想先在安卓设备上把 RN 应用运行起来。

根据 RN 官方文档所说的，需要安装合适的 Android SDK 和 Android AVM。文档中建议安装的 Android SDK 版本是 Android 9.0 Pie，然后再按文档的步骤创建合适的虚拟机 AVD，因为我觉得在开发过程中用真机做测试太过麻烦，所以建议安装虚拟机。我记得在做钢琴APP的UI时，Android Studio 支持实时更新调整后的 UI，所以很方便。安装虚拟机时，注意 Android SDK 的版本应该和镜像对应。

RN 官方文档建议安装的 SDK 版本为 Android SDK 9.0 Pie。我把 9.0 到最新版本的 Android SDK 都安装好了。后面我仍然使用 Android SDK 9.0 Pie 版本。

选择完安卓手机机型后，再选择安卓系统镜像。上面安装了 Android SDK 9.0 Pie，所以这里安装镜像时下载的也是 Pie 版本的安卓系统镜像。点击下一步即可完成虚拟机的创建。从下图中看得出，我创建了两个虚拟机，它们的SDK版本都是9.0，只是手机型号不同而已，你还可以根据对设备尺寸等需要创建自定义硬件配置的安卓虚拟机设备。

上面顺利完成了 Android SDK 和 Android AVD 的安装，接下来就要打通 React Native 和 Android 开发环境。根据官方文档步骤，从终端进入项目的根目录中，然后在终端执行以下命令：

npx react-native run-android

上方命令开始执行，首先会自动打开一个新的终端窗口，如下图所示。然后又会自动打开安卓虚拟机，也就是我在上面创建的两个虚拟机中的第一个，我猜列表中的第一个虚拟机会成为默认启动的虚拟机。新打开的终端窗口会启动实时监听项目中 JS 文件的变化的服务，并通知虚拟机中的应用实时刷新 UI。

刚才执行 npx react-native run-android 的终端里会自动开始往打开的虚拟机下载必要的文件，下图展示了从命令开始执行一直到命令执行完毕的全部输出。

到这里，React Native 在 Android 开发环境下的配置基本告一段落。尝试修改示例项目中的 App.js 文件内的代码，虚拟机会迅速作出刷新 UI 的响应，非常方便高效。

接下来是 React Native 和 Xcode 的配合配置 iOS 应用的开发环境，由于是第一次上手 Xcode 开发 iOS 应用，我希望能像上面配置 Android 开发环境一样顺利。