3eb99f84f7131ca3527385d9169c0d68
React Native 笔记一:创建 React Native 工程

0 前言

使用 React Native 的第一步是建立一个 React Native 工程并运行它。

在本文中我将记录这个过程,主要分为以下步骤:

  1. 安装 React Native CLI,使用它来创建工程
  2. 成功创建 React Native 工程
  3. 向工程中导入 TypeScript
  4. 向工程中添加 Jest 测试框架

本文主要参考了以下文档:

官方的手册很详细,不过还是有一些细节需要补充。尤其是在刚入门的时候,只知其然,不知其所以然,遇到问题有些不知所措。本文在文档的基础上补充了一些帮助理解的内容。

目录如下:

1 安装基础依赖

React Native 除了运行时的框架之外,还包含用于构建的打包构建工具。

打包构建工具的运行需要依赖于 node 和一些其它工具。因此在安装 React Native 之前,需要首先安装基础依赖。

1.1 node

React Native 是从前端生态产生的一个开发原生应用的框架。RN 构建工具的运行需要使用 node。

用 node 有两个用途:

  1. 运行构建工具
  2. 使用 NPM 依赖管理机制, React Native 通过 NPM 进行分发

安装,本文中以 macOS 为例,安装 node:

brew install node

node 有多种安装方法,尤其是当系统中需要多个 node 版本共存的时候,此时可以考虑使用 nvm, Node Version Manager

1.2 yarn

node 自带有包管理器 npm,yarn 是由 Facebook 推出的一个新的包管理器。

两者在功能上是一样的,只是在性能上有些差异。

本文中使用 yarn 进行包管理。使用 npm 步骤也一样,只是在命令参数上有所不同。

1.3 watchman

watchman 的功能是实时检测文件系统的变化。

React Native 开发时有一个很好的特性叫 Live Reload,就是编写的代码会实时地通过编译同步到设备上,所见即所得。这个特性就需要用到 watchman。

2 React Native CLI

基础依赖安装好了,下一步需要安装 React Native CLI,它是一个命令行工具,React Native 工程都是由它来创建的。

安装:

yarn global add react-native-cli

其中:

  • 全局安装这个包
  • 安装好后在命令行里可以直接调用 react-native 命令

2.1 创建新项目

通过下面命令创建一个新项目:

react-native init 项目名

2.2 运行工程

新项目创建好后,会自带一个 Hello World 界面,编译运行工程,来验证是否创建成功。

cd AwesomeProject
// 运行 Android 版本
react-native run-android
// 运行 iOS 版本
react-native run-ios

run-android 出错:SDK location not found.

问题的原因是 React Native CLI 自动创建的 Android 工程找不到 Android SDK。

解决方法是设置环境变量 ANDROID_HOME, 或者将 SDK 地址写入 local.properties

metro bundler

以 run-android 为例,如果一切顺利,这时当前的命令行会开始执行 Android 工程的 gradle 构建。

同时会弹出一个新的命令行窗口,名为 Metro Bundle,它是 React Native 的打包器:

Scanning folders for symlinks in /Users/Code/ReactNative/WRNDemo/node_modules (28ms)
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/Code/ReactNative/WRNDemo 


Metro Bundler ready.

Loading dependency graph, done.

Metro Bundle 监听 8081 端口,待 Android 工程编译完成,会自动安装到设备上,同时通过 adb 建立一个反向代理,将设备的 8081 端口映射到电脑的 8081 端口。

Android 应用执行的时候,会访问 8081 端口,请求应用包,Metro Bundle 收到请求,将包发送到设备上,Android 应用下载完成后,加载运行这个包,Hello World 界面就展示出来了。

Hello World

Hello World

3 添加 TypeScript

TypeScript 是在 2012 年 10 月,由微软发布的一个扩展 JavaScript 的语言。

TypeScript 的大量吸取了 C# 和 Java 的语法特性。

TypeScript 的优势,与 JavaScript 比较:

  • 强类型
  • first-class (OOP),基于类和接口。JavaScript 本身没有类,ES6 有了类,但是还是语法糖,做不到 first-class
  • 代码补全与 Lint:相较于 JavaScript 提升太多太多,接近于原生开发
  • 更易写出高代码质量,易协作开发的大型项目
  • Visual Studio Code 就是使用 TypeScript + Electron 开发的

我在 React Native 项目中都选择使用 TypeScript 作为开发语言。

之前的章节中我们成功创建了一个 React Native 工程,在本节中将介绍如何向这个工程中加入对 TypeScript 的支持。

这里主要参考了微软官方的文档 TypeScript React Native Starter,不同的是,我将加入基础性的解释,说清楚每一步是要做什么,为何要这么做。

3.1 添加 TypeScript

进入刚刚创建的工程目录,执行:

yarn add --dev typescript

TypeScript 就加入你的工程了。这背后发生了什么?TypeScript 是如何生效的?为何一门语言通过安装一个依赖包来实现呢?

一个 TypeScript 语言编写的工程,源码文件的后缀为 .ts 或 .tsx (React JSX),他们是用 TypeScript 编写的。React Native 的 JavaScriptCore 或者浏览器的 V8 引擎都是 JavaScript 语言解释器,他们无法直接理解 TypeScript 语言。

因此,虽然 JavaScript 是脚本语言,也需要一个编译过程,将 TypeScript 先编译为 JavaScript,之后再给解释器运行。

上面安装的 typescript 包中包含了一个 TypeScript 编译器 tsc,来执行上面的编译操作。

每个 TypeScript 项目的根目录都有一个名为 tsconfig.json 的全局配置文件,用于设定在这个项目中启用的 TypeScript 语法特性。

在根目录,通过下面执行创建配置文件:

yarn tsc --init --pretty --jsx react

打开 tsconfig.json,取消对这一项的注释:

{
  ...
  // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
  ...
}

3.2 react-native-typescript-transformer

在上一节中, 我们把 TypeScript 编译器导入到了工程里,并且采用了默认的 TypeScript 全局语法设置。

上面我们说到需要一个编译过程,将 TypeScript 先编译为 JavaScript,这个过程是如何实现的呢?

在这里通过 react-native-typescript-transformer 这个工具来实现。

它的作用是,当 React Native 构建工具在执行编译时,如果源码是 TypeScript 文件(.ts, .tsx),构建工具会调用 react-native-typescript-transformer 来执行变换工作,将 TypeScript 转换为 JavaScript,放入最终的 bundle 中。

首先添加 react-native-typescript-transformer 依赖:

yarn add --dev react-native-typescript-transformer

注意:

  • 这里我们通过 —dev 添加的是开发时依赖
  • 开发时依赖只在开发时用到,不会带到最终的 App 包中
top Created with Sketch.