React Native开发原生应用入门

全篇共 4208 字。按500字/分钟阅读,预计用时 8.4 分钟。总访问 267 次,日访问 4 次。

前端是个广义的概念,前端是离用户最近的一端,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

React Native项目启动

顺利启动服务器。接下来在安卓设备或 iOS 上安装 Expo 应用程序。安卓设备从 Google Play 下载 Expo。iOS 设备从 App Store 下载 Expo。两个应用的界面和操作大致相同,只是连接 RN 应用的方式有些不同。左边是安卓设备上安装的 Expo 应用,右边是 iOS 设备上安装的 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分钟才把项目目录初始化出来。

react native内建命令行初始化项目

我已经提前安装好了 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 的版本应该和镜像对应。

Android Studio 安装的SDK版本为 Android 9.0 Pie

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

Android Studio 安装安卓虚拟机系统镜像

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

Android Studio 中已经安装的虚拟机

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

npx react-native run-android

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

构建React Native应用

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

构建React Native应用

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

安卓虚拟机运行React Native应用

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

根据文档步骤,在 App Store 安装 Xcode,在 Xcode 软件的配置面板中的 Locations 标签下设置命令行工具 Commend Line Tools,再在 Components 标签中选择和下载合适的模拟器,模拟器的种类包括了 iOS/tvOS/watchOS 三种,我选择了最新版本的 iOS 模拟器,几个G的模拟器。macOS 自带了 Ruby 命令行工具,gem 是 Ruby 的包管理工具,使用 gem 安装 cocoapods:

sudo gem install cocoapods

使用终端进入项目根目录,在 iOS 模拟器启动我们的 React Native 应用:

cd AwesomeProject
npx react-native run-ios

和上面启动安卓虚拟机一样,自动启动 iOS 虚拟机,自动打开一个新的终端窗口用于提供监听项目JS文件变化的服务。不得不说,配置 iOS 开发环境竟然比 Android 开发环境还要简单。终端没有下载很多东西:

终端启动在 iOS 虚拟机上的 React Native 应用

iOS 虚拟机启动成功后,自动打开 React Native 应用。iOS 和 Android 上的 UI 几乎完全一致,但不得不说在 iOS 系统上的使用体验要更好一些。

iOS 虚拟机上运行 React Native 应用

到此,我们完成了最基础但是最重要的 React Native 在 Android 和 iOS 系统上运行应用的开发环境搭建工作。本篇文章对应 React Native 官方文档的 Getting Started 章节。开发环境顺利搭建完毕,那么接下来要做的就是通过制作 Demo 体验一下 React Native 和 React 的异同,然后再学习 RN 上各种实用的 组件 API