React Native实战

《React Native实战：JavaScript开发iOS和Android应用》的作者Nader Dabit 是AWS Mobile 开发人员、React Native Training 创始人和React Native Radio 播客主持人。《React Native实战：JavaScript开发iOS和Android应用》旨在帮助iOS、Android 和Web 开发人员学习使用React Native 框架，构建高质量的iOS 和Android 应用程序。书中介绍了React Native 入门基础知识，重点关注能够解决实际问题的实战技巧，深入探讨样式、导航、动画、API、数据架构、代码重用等内容。书中涉及的概念和技巧都附有简短示例和代码清单，读者可以在线获得源代码。扫描关注封底机械工业出版社计算机分社官方微信订阅号——IT有得聊，回复64090即可获取本书配套资源下载链接，并可获得更多增值服务和最新资讯。

Nader Dabit 是AWS Mobile 的开发人员，致力于为开发者提供工具和服务，使其能够使Nader Dabit 是AWS Mobile 的开发人员，致力于为开发者提供工具和服务，使其能够使用已掌握的技能组建全栈Web 和移动应用程序。Nader Dabit 还是React Native Training 的创始人和React Native Radio 播客的主持人。

《React Native实战：JavaScript开发iOS和Android应用》是一本小白都能读懂的编程书。《React Native实战：JavaScript开发iOS和Android应用》开始React Native入门到第二部分再React Native中开发应用程序，再到第三部分跨平台API开发，第四部分进行综合实战，以完整项目贯穿整本书，系统地介绍了利用JavaScript开发iOS和Android高质量应用程序的过程，每个小知识点跟随实战练习，讲解透彻，且免费提供所有源码。

多年以来，笔者一直痴迷于移动应用程序开发，这份痴迷是笔者学习编码的原动力，激励笔者一路走来，先后学习了Objective-C、jQuery mobile 和Cordova，以及本书要讲解的ReactNative。

笔者的职业生涯是围绕JavaScript 进行的，多年来，在进行Web 开发的过程中，笔者始终不忘追求如何使用现有的技能来提高效率。寻找更加高效的方法一直是笔者职业生涯中不变的初心。

当React Native 首次发布时，笔者意识到这将是一个重要事件。当时，全球已有成千上万的React 和JavaScript 开发人员，React Native 为这些开发人员开辟了一条新的路径，将他们现有的技能扩展至移动应用程序开发领域，这条路径是Cordova 等其他项目所不具备的。此外，React Native 也对React 开发人员产生了很大吸引力，他们当时是所有前端开发人员中增长最快的人群。另外，React Native 还有一个优势，与同一空间内其他可选项相比，React Native框架可以显著提高应用程序的质量。

在笔者第一次将自己编写的应用程序放置于应用程序商店后，笔者又学到了很多东西，因此下决心开始回答有关Stack Overflow 的问题，之后笔者很快意识到，笔者所分享的宝贵知识同时有助于他人和笔者自己的职业生涯，因此笔者就愈来愈乐此不疲地回答相关问题。

回答问题的过程中，笔者自己也收获颇丰。最终笔者决定术业有专攻，专业研究ReactNative 框架。笔者从许多成功的开发人员和开发顾问处得知，他们在职业生涯中取得的成就很大程度上归功于专业化，专业化可以大大提高他们的工作效率和业务量，因此也为他们带来了更多的收入。所以，笔者决定在职业生涯中首次尝试成为这样的一名专业人员，很快笔者就获得了许多咨询和培训的机会，事实证明这是一个明智的选择。

笔者见证了React Native 框架从萌芽到目前蓬勃发展的历程，看到许多开发人员和公司正是通过该框架提供的功能快速提高了效率和生产力。我们正在见证React Native 激动人心的历史时刻：越来越多的世界500 强企业开始采用React Native，并且React Native 逐渐成为开发人员工具包中的首选，这必将鼓舞更多的人在React Native 框架上开发应用程序。看到React Native 框架蓬勃发展，看到越来越多使用React Native 发布的新应用程序，笔者感到无比兴奋！

目录

译者序

致谢

前言

关于本书

关于作者

关于封面配图

第一部分 React Native入门

第1章 React Native入门

1.1 介绍React和React Native

1.1.1 一个基本的React类

1.1.2 React生命周期

1.2 读者将学到什么

1.3 读者应该具备什么

1.4 了解React Native的工作原理

1.4.1 JSX

1.4.2 线程

1.4.3 React

1.4.4 单向数据流

1.4.5 差异化

1.4.6 组件思维

1.5 React Native的优点

1.5.1 对开发者的可用性

1.5.2 提高开发人员生产力

1.5.3 性能

1.5.4 单向数据流

1.5.5 开发人员体验

1.5.6 代码转换

1.5.7 生产力和效率

1.5.8 社区

1.5.9 开源

1.5.10 立即更新

1.5.11 构建跨平台移动应用程序的其他解决方案

1.6 React Native的缺点

1.7 创建和使用基本组件

1.7.1 组件概述

1.7.2 原生组件

1.7.3 组件的构成

1.7.4 可导出的组件

1.7.5 组件组合

1.8 创建一个入门项目

1.8.1 Create React Native App CLI

1.8.2 React Native CLI

第2章 了解React

2.1 使用状态管理组件数据

2.1.1 正确操作组件的状态

2.2 使用属性管理组件数据

2.3 React组件规范

2.3.1 使用render方法创建UI

2.3.2 使用属性初始值设定项和构造函数

2.4 反React生命周期方法

2.4.1 静态方法getDerivedStateFromProps

2.4.2 生命周期方法componentDidMount

2.4.3 生命周期方法shouldComponentUpdate

2.4.4 生命周期方法componentDidUpdate

2.4.5 生命周期方法componentWillUnmount

第3章 构建React Native应用程序

3.1 todo app布局

3.2 todo app编码

3.3 打开开发者菜单

3.3.1 在iOS模拟器中打开开发者菜单

3.3.2 在Android模拟器中打开开发者菜单

3.3.3 使用开发者菜单

3.4 继续构建todo app

第二部分 在React Native中开发应用程序

第4章 样式入门

4.1 在React Native中应用和组织样式

4.1.1 在应用程序中应用样式

4.1.2 组织样式

4.1.3 将样式视为代码

4.2 将样式应用于View组件

4.2.1 设置背景颜色

4.2.2 设置边框border属性

4.2.3 指定边距margin和填充padding

4.2.4 使用位置position放置组件

4.2.5胸卡Profile Card定位

4.3将样式应用于Text组件

4.3.1 对比Text组件与View组件

4.3.2 字体样式

4.3.3 使用装饰性文本样式

第5章 样式进阶

5.1 针对特定平台的尺寸和样式

5.1.1 像素、点和DP

5.1.2 使用ShadowPropTypesIOS和Elevation创建阴影

5.1.3实战：在胸卡上设置阴影

5.2 使用变形来移动、旋转、缩放和倾斜组件

5.2.1 透视产生的3D效果

5.2.2 使用translateX和translateY沿x轴和y轴移动元素

5.2.3 使用rotateX，rotateY和rotateZ旋转元素（rotate）

5.2.4 旋转超过90°时设置可见性

5.2.5 使用scale、scaleX和scaleY缩放屏幕上的对象

5.2.6 使用缩放变形创建胸卡缩略图

5.2.7 skewX和skewY使元素沿x轴和y轴倾斜

5.2.8 变形的关键点

5.3 使用flexbox布置组件

5.3.1 使用flex改变组件的尺寸

5.3.2 使用flexDirection指定flex的方向

5.3.3 使用justifyContent定义组件沿主轴的排列方式

5.3.4 使用alignItems对齐容器中的子项

5.3.5 使用alignSelf覆盖父容器的对齐方式

5.3.6 使用flexWrap防止项目被剪裁

第6章 导航

6.1 对比React Native导航与网页导航

6.2 构建一款页面导航应用程序

6.3 实现数据持久化

6.4 使用DrawerNavigator创建抽屉式导航

第7章 动画

7.1 介绍Animated API

7.2 获得焦点时表单输入放大

7.3 用插值创建自定义加载动画

7.4 创建多个并行动画

7.5 创建一个动画序列

7.6 使用Animated.stagger交错动画开始时间

7.7 Animated动画库的其他技巧

7.7.1 重置动画值

7.7.2 调用回调函数

7.7.3 使用useNativeDriver卸载动画至原生线程

7.7.4 使用createAnimatedComponent创建自定义可动画组件

第8章 使用Redux数据架构库

8.1 Redux的定义

8.2 使用context在React应用程序中创建和管理全局state

8.3 在React Native应用程序中实现Redux

8.4 创建Redux reducer来存放Redux的state

8.5 添加provider并创建store

8.6 使用connect函数访问数据

8.7 添加action

8.8 在reducer中删除Redux store中的项目

第三部分API参考

第9章 实现跨平台API

9.1 使用Alert API创建跨平台通知

9.1.1 告警用例

9.1.2 告警示例

9.2 使用AppState API检测当前应用程序的状态

9.2.1 AppState用例

9.2.2 使用AppState的示例

9.3 使用AsyncStorage API实现数据保存

9.3.1 AsyncStorage用例

9.3.2 使用AsyncStorage的示例

9.4 使用Clipboard API将文本复制到剪贴板

9.4.1 Clipboard用例

9.4.2 使用Clipboard的示例

9.5 使用Dimensions API获取用户的屏幕信息

9.5.1 Dimensions API用例

9.5.2 使用Dimensions API的示例

9.6 使用Geolocation API 获取用户当前的位置信息

9.6.1 Geolocation API用例

9.6.2 使用Geolocation API的示例

9.7 使用Keyboard API控制本机键盘的位置和功能

9.7.1 Keyboard API用例

9.7.2 使用Keyboard API的示例

9.8 使用NetInfo获取用户的当前联网状态（在线/离线）

9.8.1 NetInfo用例

9.8.2 使用NetInfo的示例

9.9 使用PanResponder获取触摸和手势事件信息

9.9.1 PanResponder API用例

9.9.2 使用PanResponder的示例

第10章 实现特定于iOS的组件和API

10.1 特定平台代码

10.1.1 iOS和Androld文件扩展名

10.1.2 使用Platform API检测平台

10.2 DatePickerIOS

10.2.1 DatePickerIOS用例

10.3 使用PickerIOS组件处理值列表

10.3.1 使用PickerIOS的示例

10.4 使用ProgressViewIOS显示加载进度

10.4.1 ProgressViewIOS用例

10.4.2 使用ProgressViewIOS的示例

10.5 使用SegmentedControlios创建水平选项卡栏

10.5.1 SegmentedControlIOS用例

10.5.2 使用SegmentedControlIOS的示例

10.6 使用TabBarIOS在UI底部渲染选项卡

10.6.1 TabBarIOS用例

10.6.2 使用TabBarIOS的示例

10.7 使用ActionSheetIOS显示操作表或分享框

10.7.1 ActionSheetIOS用例

10.7.2 使用ActionSheetIOS的示例

第11章 实现特定于Android的组件和API

11.1 使用DrawerLayoutAndroid创建侧滑菜单

11.2 使用ToolbarAndroid创建工具栏

11.3 使用ViewPagerAndroid实现可滚动分页

11.4 使用DatePickerAndroid API显示本机的日期选择器

11.5 使用TimePickerAndroid创建时间选择器

11.6 使用ToastAndroid实现Android toast

第四部分 将各部分整合为一个应用程序

第12章 使用跨平台组件构建Star Wars 应用

12.1 创建Star Wars 应用并安装依赖项

12.1.1 导入People组件并创建Container组件

12.1.2 创建导航组件并注册路径

12.1.3 为初始视图创建主类

12.2 使用FlatList、Modal和Picker创建People组件

12.2.1 创建state并设置fetch调用以检索数据

12.2.2 添加剩余的类方法

12.2.3 实现render的方法

12.3 创建HomeWorld组件

12.3.1 创建HomeWorld类并初始化状态

12.3.2 使用url属性从API获取数据

12.3.3 完成HomeWorld组件

附录A 安装并运行React Native

A.1 开发iOS 应用

A.1.1 准备开始

A.1.2 在iOS 上测试安装

A.2 开发Android 应用

A.2.1 使用Mac 开发Android 应用

A.2.2 使用Windows 开发Android 应用

A.2.3 使用Linux 开发Android 应用

A.2.4 创建新项目（Mac/Windows/Linux）

A.2.5 运行该项目（Mac/Windows/Linux）