本书中你将学到的内容: 1

如何阅读本书1

各章节的组织结构2

第2 章安装配置新项目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

在已有的iOS 应用中集成React Native 5

首先建立一个简单的iOS 应用5

安装React Native 5

创建React Native 应用6

将React Naitve 集成到iOS 应用中去7

在设备上编译和运行13

在设备上运行13

练习： 15

第3 章Flexbox 布局介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Web 开发中的Flexbox 18

Flexbox 布局究竟是什么呢？ 19

教程20

1. 栅格系统20

2. 圣杯布局24

3. 带有可变宽度搜索框的流式导航条27

4. 垂直居中32

在React Native 中使用Flexbox 35

第4 章开发**个应用. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

在React Native 中完成“Hello World” 38

创建项目38

使用Xcode 39

使用模拟器39

项目结构41

React 基础43

render 函数43

样式45

注册组件46

修改组件46

搜索框和数据检索50

增加搜索框50

方法代理51

检索数据52

显示结果55

组件状态55

创建我们的ListView 组件56

创建每个数据单元57

给列表中每个结果项设置样式59

结果60

第5 章在React Native 中使用导航. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

第6 章动画和滑动菜单. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

我们需要做什么71

相关的代码71

它是如何运行的75

如何使用76

扩展一些缺少的功能78

ii 目录

第7 章用React Native 绘制Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

使用WebView 79

如何使用80

使用ReactART library 82

在网页中使用ReactART 82

在React Native 中使用ReactART 85

结论90

使用React Native 播放音频90

第8 章你的**个自定义视图. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

尝试一下98

第9 章Flux 介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Flux 是什么？ 104

从React 到Flux 105

Flux 110

练习119

第10 章处理复杂的应用程序状态. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

解决方案121

初识Baobab 121

把我们的状态树并入ReactJS 123

连接单个游标到组件124

连接多个游标到组件124

如何改变Baobab 树的状态125

应用程序状态127

一个稍微复杂的例子129

Optimize 130

1.ReactJS 的级联渲染131

2. 重复渲染131

第11 章使用Node 来实现服务端API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

安装Express： 135

目录iii

Request 和Response 对象136

理解中间件139

从URL 中获取参数142

处理相关参数143

路由实例143

重构路由144

使用JSON 146

JSON 结构146

在javaScript 中使用JSON 149

iOS 中的HTTP 149

Web 服务151

NSURL, NSURLRequest, NSURLSession 和NSURLSessionTask 152

构造URL 和发送请求153

使用NSURLSession 153

JSON 数据155

解析JSON 数据156

主线程156

更深入的学习：请求主体157

第12 章在React Native 中使用文件上传. . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

创建服务器159

注解161

进行文件验证161

总结： 162

React Native 文件上传的客户端： 162

第13 章理解Javascript Promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

事件并不是**的172

Promise 术语173

JavaScript 中的Promise 174

浏览器支持和Polyfill 175

与其他库的兼容性175

让复杂的异步代码变得更加简单176

iv 目录

将Promise 用于XMLHttpRequest 177

链式调用178

数值处理178

异步操作队列179

错误处理180

图片181

JavaScript 异常和Promise 182

错误处理实战182

并行和串行—— 鱼和熊掌兼得184

创建序列185

Promise 和Generator 190

Promise API 参考193

静态方法193

构造器194

实例方法194

第14 章Fetch 简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

XMLHttpRequest 快要过时了195

fetch 基础使用195

使用XMLHttpRequest 实现195

使用fetch 实现196

响应中的元数据197

响应类型197

Promsie 方法链198

使用fetch 请求发送凭证信息199

问答环节200

我该如何取消一个fetch 请求？ 200

有相关的polyfill 么？ 200

为什么在service workers 中支持“no-cors”，而在window 中却不行？ 200

第15 章在iOS 中使用SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

创建并打开数据库202

绑定变量203

目录v

开发SQLite 模块204

第16 章集成Google Admob . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

创建项目209

将SDK 添加到你的Xcode 项目209

第17 章React Native 组件国际化. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

我要做什么214

工作机制214

安装步骤214

在项目中使用218

第18 章测试React Native 组件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

安装配置测试环境221

编写测试程序226

第19 章附录：React.js 快速介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

JSX - React 的特殊语法228

开始和运行229

组件- 构建React 的基石229

在我的java****** 代码中，出现了HTML 片段？ 230

组件和状态231

第20 章附录B：Objective-C Primer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

类的基本语法233

方法233

属性234

实现235

规范237

第21 章webpack 入门. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

为什么要使用webpack? 238

本书是一本介绍React Native 框架的实用快速入门指南。你并不需要成为一名Objective-C 的

开发高手，当你阅读完这本书之后，我敢肯定，你能够在一天时间内，就把自己的想法变为

实际的应用发布到Apple Store 上去。

本书中你将学到的内容

? 学习如何搭建和调试一个React Native 应用。

? 学习如何设计构建一个iOS 应用。

? 学习如何布局iOS 界面。

? 学习如何使用基本的React Native/iOS 控制器和模块。

? 学习如何使用Node.js 搭建你自己的API 服务器。

? 学习如何在你的应用中使用SQLite 数据库。

? 学习如何在应用中集成第三方库。

? 学习如何测试组件。

? 学习ReactJS 的设计模式。

如何阅读本书

如果你本身就从事Web 开发工作，那么这本书特别符合你的需求。书中的内容能够帮你通过

React Native 技术将你熟悉的Web 开发理念直接应用到iOS 开发中。

这个过程并不会让你通过参考一些网站来学习枯燥的概念点。本书能够让你从零开始学习这

些内容。在我一开始写这本书的时候，只是计划写一个电子书来说明开发应用的步骤，并

且认为这样已经足够了。但是在写作的过程中，我的想法发生了改变。在学习完React/React

Native 的理念后，你就可以随处使用它们了，所以对学习者来说，在掌握所有的React Native

技术开发自己的iOS 应用之前，真正学习并理解所有的概念是非常有必要的。

有一个好消息是，Android 版本的React Native 也将会发布。那时候，你在本书中学到的所有

东西，都可以自然而然地应用到Android 应用开发中了。

本书的组织结构

? 每章的开头都会介绍一个概念，帮你了解这个概念在Web 开发中是如何体现的。然后

我们会将这个概念过渡到React Native 开发中，让你知道这个概念在React Native 中如

何具体体现，这个概念哪些部分做了转变，哪些没有变化，或者哪些部分被舍弃了。

? 在本书的*后，将帮你运用所有学到的知识来开发一个真实的应用。