React Native开发指南pdf

自2015年春天Facebook开源React Native以来，React Native就凭借其强大的可扩展性、良好的用户体验以及可拥有原生外观等优势得到开发者的关注和青睐。

本书是一本实践指南，从基础知识入手，逐步深入，带领读者部署可100%代码复用的、成熟的跨平台移动应用。作者通过示例代码向Web开发者和前端工程师展示了如何使用移动组件构建界面并编写样式，以及如何调试和部署应用。除了框架本身的讲解，作者还探讨了如何使用第三方库，以及如何编写自己的Java或者Objective-C的React Native扩展。

- 了解React Native如何开放原生UI组件接口

- 类比HTML元素，了解该框架如何使用原生组件

- 创建自己的React Native组件和应用，并为它们编写样式

- 为该框架不支持的API和功能安装第三方模块

- 使用工具来调试代码，并解决JavaScript之外的问题

- 整合所学知识，开发一款高效记忆闪卡应用——Zebreto

- 部署应用至iOS应用商店和Google Play商店

React Native开发指南 内容简介

本书通过丰富的示例和详细的讲解，介绍了React Native这款JavaScript框架。在React Native中利用现有的JavaScript和React知识，就可以开发和部署功能完备的、真正原生的移动应用，并同时支持iOS与Android平台。除了框架本身的概念讲解之外，本书还讨论了如何使用第三方库，以及如何编写自己的Java或Objective-C的React Native扩展。

React Native开发指南 目录

第1章 初识React Native

1.1 React Native的优点

1.1.1 开发者体验

1.1.2 代码复用与知识共享

1.2 风险和缺点

1.3 小结

第2章 React Native工作原理

2.1 React Native是如何工作的

2.2 渲染周期

2.3 在React Native 中创建组件

2.3.1 编写视图

2.3.2 使用.JSX

2.3.3 原生组件的样式

2.4 宿主平台接口

2.5 小结

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

3.1 搭建环境

3.1.1 安装React Native

3.1.2 iOS依赖

3.1.3 Android依赖

3.2 创建一个新的应用

3.2.1 在iOS平台运行React Native应用

3.2.2 部署到iOS设备

3.2.3 在Android平台运行ReactNative应用

3.2.4 小结：创建并运行项目

3.3 探索示例代码

3.3.1 添加组件到视图中

3.3.2 React Native中的模块导入

3.3.3 FirstProject组件

3.4 开发天气应用

3.4.1 处理用户输入

3.4.2 展现数据

3.4.3 添加背景图片

3.4.4 从Web获取数据

3.4.5 整合

3.5 小结

第4章 移动应用组件

4.1 类比HTML元素与原生组件

4.1.1 文本组件

4.1.2 图片组件

4.2 处理触摸和手势

4.2.1 使用TouchableHighlight

4.2.2 GestureResponder系统

4.2.3 PanResponder

4.3 使用结构化组件

4.3.1 使用ListView

4.3.2 使用Navigator

4.3.3 其他结构化组件

4.4 平台特定组件

4.4.1 iOS或Android特定组件

4.4.2 平台特定版本的组件

4.4.3 何时使用平台特定组件

4.5 小结

第5章 样式

5.1 声明和操作样式

5.1.1 内联样式

5.1.2 对象样式

5.1.3 使用Stylesheet.Create

5.1.4 样式拼接

5.2 组织和继承

5.2.1 导出样式对象

5.2.2 样式作为属性传递

5.2.3 复用和共享样式

5.3 定位和设计布局

5.3.1 使用flexbox布局

5.3.2 使用绝对定位

5.3.3 学以致用

5.4 小结

第6章 平台接口

6.1 使用定位接口

6.1.1 获取用户地理位置

6.1.2 处理权限问题

6.1.3 在iOS模拟器上测试定位

6.1.4 监听用户位置

6.1.5 限制

6.1.6 改进天气应用

6.2 使用用户图片与摄像头

6.2.1 相机模块

6.2.2 通过getPhotoPa rams获取图片

6.2.3 从相机渲染一张图片

6.2.4 展示照片列表

6.2.5 上传图片至服务器

6.3 AsyncSto re持久化数据存储

6.4 智能天气应用

6.4.1 WeatherProject组件

6.4.2 Forecast组件

6.4.3 Button组件

6.4.4 LocationButton组件

6.4.5 PhotoBackdrop组件

6.5 小结

第7章 模块

7.1 使用npm安装JavaScript类库

7.2 iOS原生模块

7.2.1 导入第三方组件

7.2.2 使用视频组件

7.2.3 剖析Objective-C原生模块

7.2.4 RcTVideo的实现

7.3 Android原生模块

7.3.1 安装第三方组件

7.3.2 剖析Java原生模块

7.3.3 Linea rGradient的Android实现

7.4 跨平台原生模块

7.5 小结

第8章 调试与开发者工具

8.1 JavaScript调试实践和解释

8.1.1 激活开发者选项

8.1.2 使用console.l.og调试

8.1.3 使用JavaScript调试器

8.1.4 使用React开发者工具

8.2 React Native调试工具

8.2.1 使用审查元素功能

8.2.2 宕机红屏

8.3 JavaScript之外的调试方法

8.3.1 常见的开发环境问题

8.3.2 常见的Xcode问题

8.3.3 常见的Android问题

8.3.4 React Native包管理器

8.3.5 部署至iOS设备的问题

8.3.6 模拟器行为

8.4 测试代码

8.4.1 使用Flow进行类型检查

8.4.2 使用Jest进行测试

8.5 当你陷入困境

8.6 小结

第9章 学以致用

9.1 闪卡应用

9.1.1 项目结构

9.1.2 组件层次结构

9.2 模型与数据存储

9.2.1 数据流架构：Reflux与Flux

9.2.2 在Zebreto中使用Reflux

9.2.3 AsyncStorage与Reflux Store的持久化

9.3 使用Navigator

9.4 探索第三方依赖

9.5 响应式设计与字体尺寸

9.6 小结及任务

第10章 部署至iOS应用商店

10.1 准备Xcode工程

10.1.1 选择支持的设备和目标iOS 版本

10.1.2 启动界面图像

10.1.3 添加应用图标

10.1.4 设置Bundle名称

10.1.5 更新AppDelegate.m

10.1.6 为发布设置Schema

10.2 上传应用

10.2.1 完成协议文书

10.2.2 创建归档

10.2.3 在iTunes Connect上创建应用

10.3 使用TestFlight进行Beta测试

10.4 提交应用审核

10.5 小结

第11章 部署Android应用

11.1 设置应用图标

11.2 生成release版本的APK

11.3 通过邮件或链接发布

11.4 提交应用至Play商店

11.4.1 通过Play Store进行Beta测试

11.4.2 Play商店列表

11.4.3 商店列表所需的资源

11.4.4 发布应用

11.5 小结

总结

附录A ES6语法

附录B 命令与快速入门指南

React Native开发指南 精彩文摘

1.1　React Native的优点

事实上，React Native 调用宿主平台标准渲染接口的方式已经使它从其他现有的跨平台应用开发方案（ 比如 Cordova 或 Ionic） 中脱颖而出。 目前通过编写 JavaScript、HTML 和 CSS 的方式进行应用开发的方案大多使用 WebView 进行界面渲染，当然这种方案是可行的，但也带来了一些问题，尤其是性能损耗。同时，这种方案通常无法使用宿主平台的原生 UI 组件，所以这些框架尝试去模仿原生 UI 组件的行为，而模仿的效果通常让人觉得不够真实。为了模仿各种类似动画这样的细节，一般都要付出巨大的努力，然而它们很快又会过时。

相反，React Native 则将你的代码解析成真正原生的 UI 组件，利用了所用平台上现有的视图渲染方式。并且，由于 React 不在 UI 主线程中运行，你的应用可以在不牺牲灵活性的前提下保持高性能。React Native 的生命周期与 React 相同，当属性（props）或状态（state）发生改变时，React Native 会重新渲染视图。而与浏览器上的 React 最大的不同在于，React Native 使用了宿主平台上的 UI 元素来代替 HTML 和 CSS。

对于习惯了 Web 平台的 React 开发者来说，这意味着你可以使用熟悉的工具来开发真正原生的移动应用。在开发者体验与跨平台开发等方面，React Native 较传统的移动端开发来说也有一定的优势。

1.1.1　开发者体验

如果你曾经有过移动端的开发经历，将会对 React Native 的易用性感到震惊。React Native 团队已经研发了强大的开发工具并在框架内嵌入了友好的错误提示，因此使用这些强大的工具会让开发体验更加自然。

例如，由于 React Native 使用了 JavaScript，我们查看修改结果时不需要重新编译。相反，按下 Command+R 就可以刷新应用，就和在网页上开发一样。在传统移动端开发中，编译构建应用所花费的时间会积少成多，相比之下 React Native 的快速迭代就像是天赐之福。

React Native 还可以让你更好地利用智能调试工具以及错误报告机制。如果你习惯于使用 Chrome 或者 Safari 的开发工具（图 1-1），那么使用它们进行移动开发一定也会让你十分愉悦。同样，你可以选择喜爱的任何文本编辑器来开发 JavaScript：React Native 不强制你使用 Xcode 进行 iOS 开发，也不强制使用 Android Studio 进行 Android 开发。