React Native开发指南(txt+pdf+epub+mobi电子书下载)

、、 等）。而在 React Native 中，所有的元素都将被平台特定的 React 组件所替换（见表 2-1）。最基础的组件是能跨平台的 ，这是一个简单且灵活的 UI 元素，类似于

表2-1：Web与React Native基础元素的比较ReactReact Native

其他组件则是平台特定的。例如， 组件显然将被渲染成 iOS 标准的日期选择器。下面是从 UIExplorer 示例应用中摘录出来的代码，用来展示 iOS 日期选择器。正如你期待的那样，用法相当直观：

以上代码将被渲染成一个标准的 iOS 日期选择器（如图 2-5 所示）。图 2-5：DatePickerIOS，顾名思义，是 iOS 特有的组件

由于我们所有的 UI 元素均为 React 组件，而不是像

UIExplorer 应用是一个打包的标准 React Native 示例（https://github.com/facebook/react-native#examples），可以让你查看它所支持的所有 UI 元素，建议你体验一下其中包含的各种元素。除此之外，它还讲解了许多关于样式和交互的知识。平台特定的元素和接口在官方文档中有特殊的标签，通常使用平台名称作为后缀，例如： 和 。

这些组件因平台而不同，因此在使用 React Native 时，如何组织你的组件变得尤为重要。在 Web 环境的 React 中，我们通常混合各种 React 组件，有的组件控制逻辑及其子组件，而有的则渲染原生标记。在使用 React Native 时，如果你想复用代码，那么这些组件的抽象分离就至关重要。当然，如果一个组件渲染 元素，那它显然不能在 Android 平台复用了。不过，如果一个组件封装的是关联逻辑，那就可以被复用。因此，视图组件可以根据平台进行替换选择。如果你乐意的话，还可以为组件设计平台特定的版本，例如 picker.ios.js 和 picker.android.js。我们将在 4.4.2 节具体讲解。2.3.2　使用JSX

与 React 中相一致，React Native 也是通过编写 JSX 来设计视图，并将视图标记和控制逻辑组合在一起成为一个文件。React 刚问世的时候，JSX 在业界引起了强烈的反响。对于许多 Web 开发者来说，根据技术进行文件分离是理所当然的：保持 CSS、HTML 和 JavaScript 文件的独立。然而将标记、控制逻辑，甚至样式合并成一门语言难免会让人觉得混乱。

JSX 认为减少心智负担比文件分离更有用。在 React Native 中，这一点表现得更为明显。在一个没有浏览器的世界里，每个组件的样式、标记和行为被统一成单个文件的形式将会更有意义。因此，React Native 中的 .js 文件实际上就是 JSX 文件。如果你正在使用原生 JavaScript 编写 Web 环境的 React，你应该想转换到 JSX 语法来编写 React Native 项目。

假如你之前从未使用过 JSX，也不用太担心，它非常简单。举个例子，用纯 JavaScript 编写 React 组件的代码看起来如下：var HelloMessage = React.createClass({ displayName: "HelloMessage", render: function render() { return React.createElement( "div", null, "Hello ", this.props.name ); }});React.render(React.createElement(HelloMessage, { name: "Bonnie" }), mountNode);

我们可以通过使用 JSX 使其更为简洁，使用类 XML 标记来代替调用 React.createElement 方法并传入一组 HTML 属性的做法。var HelloMessage = React.createClass({ render: function() { // 返回标记，而不是调用createElement方法。 return

以上两段代码最终都会在页面上被渲染为下面的 HTML：

在 Web 中，正如使用 HTML 标签一样，我们仍然使用 CSS 来为 React 组件添加样式。不论你是否喜欢 CSS，它都已经成为 Web 开发不可或缺的一部分。React 通常不影响我们编写 CSS 的方式，它确实让内联样式（清晰且实用）的使用和样式的动态创建（通过 props 和 state）更加容易。除此之外，React 基本上不关心我们是如何处理样式的。

非 Web 平台上有大量的方法来处理布局和样式。但庆幸的是，我们在使用 React Native 时，只需要用一种标准的方法来处理样式。React 和宿主平台之间的“桥接”包含了一个缩减版 CSS 子集的实现。这个 CSS 子集主要通过 flexbox 进行布局，做到了尽量简单化，而不是去实现所有的 CSS 规则。有别于 Web 平台，CSS 的支持程度因浏览器而不同，React Native 则做到了样式规则的一致。在 React Native 配套的 UIExplorer 应用（https://github.com/facebook/react-native/tree/master/Examples/UIExplorer） 中不仅可以查看许多 UI 元素，也能看到许多支持的样式例子。

React Native 也坚持使用内联样式，通过 JavaScript 对象进行样式组织。React 团队先前也提倡在 Web 环境的 React 中使用内联样式。如果你曾经在 React 中使用过内联样式，那么下面的语法你一定非常熟悉了：// 定义一个样式。var style = { backgroundColor: 'white', fontSize: '16px'};// 然后使用它。var tv = ( A styled Text );

为了让样式更容易管理，React Native 为我们提供了创建和扩展样式的工具。我们将在第 5 章探索这部分内容。

内联样式的写法让你觉得难受？它基于 Web 背景而产生，被公认为标准实践的一个突破。相对于样式表来说，使用样式对象可能需要一些思维上的调整，从而改变你编写样式的方法。然而，在 React Native 中，这是一个实用的转变。我们将在第 5 章讨论编写样式的最佳实践和工作流程，你很难不对它的实际使用效果感到惊讶！2.4　宿主平台接口

使用 Web 环境的 React 与 React Native 最大的不同应该就在于宿主平台的接口了。在 Web 中，我们遇到的问题通常是由于采纳标准的不一致和碎片化引起的，并且大多数浏览器只支持部分核心的特性。然而在 React Native 中，平台特定的接口在提供优秀原生的用户体验方面发挥了巨大的作用。当然，要考虑的方面还有很多。接口囊括了许多功能，从数据存储到地理服务，以及操控硬件设备（如摄像头）等。由于 React Native 可以扩展到其他平台，我们有机会看到各种不同的平台接口，例如，React Native 和虚拟现实头盔之间的接口会是什么样的呢？

默认情况下，iOS 和 Android 版本的 React Native 支持许多常用的特性，甚至可以支持任何异步的本地接口，本书中将会涉及这些内容。React Native 让宿主平台接口的使用变得更加简单和直观，你可以在其中自由地试验。同时，务必思考一下怎样做才符合目标平台的体验，并在心里设计好交互过程。

毋庸置疑，React Native 的“桥接”不可能暴露宿主平台全部的接口。如果你需要使用一个未支持的特性，完全可以自己动手添加到 React Native 中。另外，如果其他人已经集成，那就更好了，所以应该及时查看社区是否已经或即将支持某些特性。我们将在第 7 章讨论这部分知识。

值得注意的是，使用平台接口也会对代码复用有帮助。同时，实现平台特定功能的 React 组件也是平台特定的。隔离和封装这些组件将会给你的应用带来更大的灵活性。当然，这对你开发 Web 应用同样奏效，如果你想共享 React 和 React Native 的代码，请记住像 DOM 这样的接口在 React Native 中并不存在。2.5　小结

使用 React Native 为移动应用编写组件与 Web 环境的 React 相比有一些不同。JSX 是强制使用的，并且我们通过创建组件的方式来开发基本模块，比如 代替了

 第 3 章构建你的第一个应用

本章将会讲解如何搭建 React Native 开发环境以及如何构建一个简单的应用，并将其部署到自己的 iOS 或 Android 移动设备上。3.1　搭建环境

搭建开发环境让你可以跟着本书的例子一起学习并开发你自己的应用。

关于安装 React Native 的说明可以查看 React Native 官方文档（http://facebook.github.io/react-native/）。官方网站会提供最新的安装参考，不过在此我们也会讲解这些步骤。

你将会用到 Homebrew（http://brew.sh/），一个 OS X 系统的通用包管理工具，用来安装 React Native 的相关依赖。本书假设你使用 OS X 操作系统，因此可以同时开发 iOS 和 Android 应用。

安装好 Homebrew 之后，运行以下命令：brew install nodebrew install watchmanbrew install flow

React Native 包管理器同时使用了 node 和 watchman， 如果在今后的开发过程中遇到问题，建议你更新这些依赖。flow 是 Facebook 公司出品的一个类型检查库，它同样被 React Native 所采用（如果你想让 React Native 项目支持类型检查，可以使用 flow）。

如果安装过程中遇到问题，你可能需要更新 brew 和相关依赖包（以下命令可能比较耗时）。brew updatebrew upgrade

如果出现错误，你需要修复本地的 brew 安装程序，brew doctor 可以帮助你找到问题所在。3.1.1　安装React Native

现在你已经安装好了 node，然后就可以通过 npm（Node 包管理器）来安装 React Native 命令行工具了：npm install -g react-native-cli

这个步骤将会在你的系统全局安装 React Native 命令行工具。完成之后，祝贺你，此时 React Native 已经安装成功了！

接下来，你需要处理特定平台的安装。为了开发特定平台的移动应用，你需要安装平台开发的依赖。本章将继续讲解相关内容，包括 iOS 和 Android 两个版本。3.1.2　iOS依赖

为了开发和发布 iOS 应用，你需要获得一个 iOS 开发者账号。申请这个账号是免费的，足够用来开发使用了。如果需要部署到 iOS 应用商店，你需要获得一个许可，价格是每年 99 美元。

如果你还没有完成这一步的话，需要下载并安装 Xcode，它包含了 Xcode 集成开发环境、iOS 模拟器以及 iOS SDK（软件开发工具包）。你可以从应用商店或 Xcode 网站（https://developer.apple.com/xcode/download/）下载。

Xcode 成功安装之后，接受许可，一切就准备就绪了。3.1.3　Android依赖

Android 依赖的安装需要较多的步骤，应查看官方文档（https://facebook.github.io/react-native/docs/android-setup.html）中最新的安装说明。需要注意的是，这些安装说明都假设你没有安装过 Android 开发环境。总体而言，安装分为三个主要阶段：安装 SDK、安装模拟器工具、创建模拟器。

首先，你需要安装 JDK（Java 开发工具包）和 Android SDK。

(1) 安装最新版本的 JDK（http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）。

(2) 通过 brew install android-sdk 安装 Android SDK。

(3) 在 shell 配置文件中正确导出 ANDROID_HOME 环境变量（~/.bashrc、~/.zshrc 或其他 shell）。export ANDROID_HOME=/usr/local/opt/android-sdk

许多 Android 相关的开发任务都使用这个环境变量。需要确保添加环境变量之后执行 source 命令使得配置可以立即生效。

接下来，在命令行执行 android 命令，从而打开 Android SDK 管理器。如图 3-1 所示，管理器将会显示出开发包的安装情况。图 3-1：Android SDK 管理器允许你选择开发包进行安装

等待 SDK 管理更新并下载开发包列表。部分开发包会被默认选中，另外要确保选中了以下选项：● Android SDK Build-tools version 23.0.1● Android 6.0 (API 23)● Android Support Repository

然后，点击 Install Packages 并接受合适的许可。等待安装完成可能会花费一些时间。

接下来，你将要安装模拟器和相关的工具。

启动一个新的 shell，然后再次运行 android 来启动 Android SDK 管理器。我们将安装一些其他的包。● Intel x86 Atom System Image (for Android 5.1.1–API 22)● Intel x86 Emulator Accelerator (HAXM installer)

再次点击 Install Packages，接受合适的许可。

这些依赖包使我们能够创建 Android 虚拟设备（Android Virtual Devices，AVDs）或模拟器，但实际上我们还未创建任何模拟器。让我们来创建它，运行如下命令启动 AVD 管理器（如图 3-2 所示）：android avd图 3-2：通过 AVD 管理器创建和运行模拟器

之后，点击 Create 按钮并填写创建模拟器的相关信息（如图 3-3 所示）。对于模拟器选项，记得勾选 Use Host GPU（如图 3-4 所示）。图 3-3：创建任何你喜欢的模拟器（此处创建了一个 Galaxy Nexus 模拟器）图 3-4：确保已经勾选了 Use Host GPU，否则模拟器会非常慢

如果愿意的话，你可以创建许多 AVD。由于 Android 设备种类繁多，有不同的屏幕尺寸、分辨率和功能，因此使用不同的模拟器通常能为测试带来帮助。当然，出于学习的目的，我们只需要安装一个即可。3.2　创建一个新的应用

你可以使用 React Native 命令行工具来创建一个新的应用，它会为你生成一个包含 React Native、iOS 和 Android 的全新模板工程：react-native init FirstProject

成功创建之后的项目结构如图 3-5 所示。图 3-5：默认工程的文件结构

图中 ios/ 和 android/ 目录包含了平台相关的开发模板。你的 React 代码被放在 index.ios.js 和 index.android.js 文件中，它们分别是各自平台的入口文件。通过 npm 安装的依赖文件通常会被放在 node_modules/ 目录下。

如果需要，可以从 GitHub 仓库中下载本书的示例工程（https://github.com/bonniee/learning-react-native）。3.2.1　在iOS平台运行React Native应用

作为初学者，我们将分别尝试在模拟器和物理设备上运行 iOS 版本的 React Native 应用。

使用 Xcode 打开 ios/ 目录下的 FirstProject.xcodeproj 文件。你会注意到左上方有一个“运行”按钮，如图 3-6 所示。点击“运行”按钮，程序将会在编译之后启动。你也可以选择不同的 iOS 模拟器作为部署目标。图 3-6：“运行”按钮和部署目标的切换

点击“运行”按钮之后，React 包管理器将会自动运行在新的终端窗口中，如果运行失败或输出错误，请在 FirstProject 目录下重新运行 npm install 和 npm start 命令。

终端窗口如图 3-7 所示。图 3-7：React 包管理器

包管理器就绪之后，iOS 模拟器将会运行默认的应用程序。不出意外的话，结果应如图 3-8 所示。图 3-8：默认应用的截图

为了让代码能在模拟器上实时更新，需要保证包管理器一直处于运行状态。如果包管理器不幸崩溃退出，可切换到工程目录，然后运行 npm start 命令来重启它。3.2.2　部署到iOS设备

为了将你的 React Native 应用上传至物理 iOS 设备中，你需要一个 Apple 开发者账号。然后，需要生成证书并注册你的设备。最后，打开 Xcode 偏好设置，添加你的账号即可（如图 3-9 所示）。图 3-9：在 Xcode 偏好设置面板添加你的账户

接下来看如何为你的账号生成证书。最简单的办法就是在 Xcode 中打开通用面板（General），如图 3-10 所示，你会看到一个警告的符号。点击 Fix Issue（修复问题）按钮来解除警告。为了从 Apple 公司获取证书，Xcode 将会一步步引导你。图 3-10：Xcode 通用面板

成功获取证书之后，工作基本就完成了。最后一步是登录到 Apple 开发者中心（http://developer.apple.com），然后注册你的设备（如图 3-11 所示）。图 3-11：在 iOS 开发者中心注册你的 iOS 设备

设备的 UDID 很容易获取。将你的设备连接到电脑上，打开 iTunes，选择你的设备，然后单击序列号，就可以看到 UDID 显示出来并且复制到剪贴板中了。

一旦将你的设备注册到 Apple 公司之后，构建列表中就会出现许可的设备了。

如果你只想发布到测试设备上，那么这个注册过程也可以在今后进行。另外，Apple 公司每年会通过开发者计划为独立开发者分配 100 个设备用于测试。

最后，我们在部署之前需要对代码作一些改动。你需要在 AppDelegate.m 文件中将 localhost 改成你的 Mac 的 IP 地址。假如你不知道如何查看自己电脑的 IP 地址，可以在终端运行 ifconfig，在 en0 下的 inet 即为 IP 地址。

例如，你的 IP 地址为 10.10.12.345，那么应该把 jsCodeLocation 修改为：jsCodeLocation =[NSURL URLWithString:@"http://10.10.12.345:8081/index.ios.bundle"];

呀！一路的配置终于完成了，现在我们可以在 Xcode 左上方选择部署的物理设备了（图 3-12）。图 3-12：选择你的 iOS 设备作为部署平台

选好之后，单击“运行”按钮，应用程序就安装到你的设备中了，就像在模拟器上一样。你会发现关闭应用程序之后，它已经被安装在主菜单中了。3.2.3　在Android平台运行React Native应用

为了在 Android 平台运行 React Native 应用，需要做两件事情：首先打开模拟器，然后运行程序。

之前我们介绍过了运行 AVD 管理器的方法（如图 3-2 所示）：android avd

选择希望运行的模拟器版本，然后点击 Start... 按钮。

另外，也可以通过命令行来运行模拟器。通过以下命令显示出所有可用的模拟器类型：emulator -list-avds

然后通过名字和 @ 前缀来运行它们，例如，我有一个名为 galaxy 的模拟器，我可以这样来运行它：emulator @galaxy

无论采用何种方式来启动模拟器，一旦启动成功，只需要在工程的根目录运行如下命令即可加载 React Native 应用：react-native run-android3.2.4　小结：创建并运行项目

以上文字涉及很多知识，因为我们需要为 React Native 安装 iOS 或 Android 设备的各种依赖，看上去比较麻烦。

好消息是，现在你已经完成了初始阶段的这些琐碎的工作，接下来就会变得更轻松。在 React Native 中创建“Hello World”，只需要在命令行运行 react-native init HelloWorld 即可。3.3　探索示例代码

我们已经部署并运行了默认的应用程序，接下来看看它是如何工作的。在这一节中，我们将深入到默认应用的源代码中去探索 React Native 项目的结构。3.3.1　添加组件到视图中

当 React Native 应用启动之后，React 组件是如何被添加到视图中的呢？是什么决定了组件的渲染情况？

问题的答案取决于平台。我们先来看项目的 iOS 版本。

我们可以在 AppDelegate.m 文件中找到答案。例 3-1 尤其要注意。

例 3-1：在 ios/AppDelegate.m 中声明根视图RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"FirstProject" launchOptions:launchOptions];

React Native 库将其所有的类名使用 RCT 作为前缀，也就是说 RCTRootView 就是一个 React Native 类。所以，RCTRootView 代表 React Native 的根视图。AppDelegate.m 中其他的代码则将视图添加到 UIViewController 中并渲染到屏幕上。这个步骤与使用 React.render 方法挂载 React 组件到 DOM 节点上有着异曲同工之妙。

眼下，AppDelegate.m 文件有两处应该修改。

第一处需要修改的地方是 jsCodeLocation 这一行，之前为了把应用部署到物理设备上，我们修改过此处。正如代码中的注释所示，第一种方式作为开发使用，第二种方式用来将预打包文件部署到硬盘上。现在我们采用第一种方式，今后一旦需要部署到应用商店，我们会更加详细地讨论这两种方式。

另一处需要修改的地方是 moduleName，它被传递给 RCTRootView 以决定哪个组件将被挂载到视图中。这里你可以指定哪些组件需要被程序渲染。

为了使用 FirstProject 组件， 你需要在 React 中注册一个相同名字的组件。如果打开 index.ios.js，你会看到代码的最后一行已经完成了这项工作（例 3-2）。

例 3-2：注册顶层组件