React Native跨平台移动应用开发

作品简介

React Native是Facebook公司最新推出的，强大的、开源的跨平台移动应用开发框架，它能大幅减少跨平台移动应用开发的工作量，并且代码结构清晰、简单易懂。同时React Native框架采用模块化结构，使应用版本的更新迭代非常简单。随着它的日趋成熟，React Native必然会成为移动应用开发的主流技术。

《React Native跨平台移动应用开发》由浅入深、系统地介绍了使用React Native框架跨平台开发所需要用到的知识。《React Native跨平台移动应用开发》每一章都专注于阐述某一方面的知识，配合若干个原创的、精小的例程，能让读者系统、快速地掌握该方面知识。

《React Native跨平台移动应用开发》是按照有基本的编程基础知识，刚学习JavaScript基本语法的读者最佳学习路径来编写的。有一定基础的开发人员也可以将本书作为React Native开发的“字典”来使用，在开发时可以快速查找相关知识点的细节。

阙喜涛，湖南省吉首市人，北京邮电大学研究生，专注智能手机应用开发十一年，任职于东信北邮信息技术有限公司，先后参与开发过中国移动POC系统、贵州移动一卡多号系统、浙江移动应用商店系统开发等等。开发移动应用下载量超过25万。

作品目录

• 前言
• 第1章　React Native
• 1.1　React Native开发特点
• 1.1.1　一次学习，随处编写
• 1.1.2　混合开发
• 1.1.3　高效的UI开发
• 1.1.4　高效的UI调试
• 1.1.5　学习门槛低、开发难度低
• 1.1.6　开发软硬件要求低
• 1.1.7　使用React Native开发的代价
• 1.1.8　为什么React Native尚未流行
• 1.2　React Native开发环境搭建
• 1.2.1　开发环境搭建起点
• 1.2.2　Windows操作系统下React Native开发环境搭建
• 1.2.3　苹果操作系统下React Native开发环境搭建
• 1.2.4　查看与删除使用npm命令安装的软件
• 1.3　代码编辑环境搭建
• 1.3.1　Sublime Text3
• 1.3.2　开发用插件
• 1.3.3　Sublime界面风格选择
• 1.3.4　键盘使用习惯
• 1.4　React Dev tool安装
• 第2章　状态机思维与状态机变量
• 2.1　初始化项目
• 2.2　运行项目
• 2.2.1　使用Android手机进行调测
• 2.2.2　使用iPhone手机或模拟器进行调测
• 2.2.3　修改JSX代码
• 2.2.4　ES6语法与ES5语法
• 2.2.5　启动调试工具
• 2.3　构建注册页面
• 2.4　React Native代码执行逻辑
• 2.5　UI框架工作基本机制
• 2.5.1　状态机思维
• 2.5.2　“冒充常量”的状态机变量
• 2.5.3　“无处安放”的状态机变量
• 2.5.4　“努力瘦身”的状态机变量
• 2.6　React Native组件间通信
• 2.7　深入理解UI重新渲染的过程
• 2.7.1　合并状态机变量
• 2.7.2　判断是否渲染
• 2.7.3　替换状态机变量
• 2.7.4　强制启动渲染
• 2.7.5　渲染过程
• 2.7.6　合并状态机变量的最简语法
• 2.8　React Native组件的成员变量
• 2.9　React Native组件的静态变量、静态函数
• 第3章　页面导航、弹出框及深入理解属性
• 3.1　分离注册组件、组件平台自适配
• 3.1.1　分离注册组件
• 3.1.2　组件平台自适配
• 3.1.3　平台检测
• 3.2　导航组件、挂接注册组件
• 3.3　挂接注册等待组件
• 3.4　Navigator组件工作机制
• 3.4.1　push与pop
• 3.4.2　replace函数
• 3.5　自定义组件
• 3.5.1　“弹出一切框”的实现
• 3.5.2　React Native中颜色类型的值
• 3.5.3　挂接自定义组件
• 3.6　BackAndroid API的bug与解决办法
• 3.7　属性确认
• 3.8　指定属性默认值
• 3.9　Alert应用程序编程接口
• 3.9.1　弹出确认框
• 3.9.2　弹出选择框
• 3.10　带导航栏的页面导航
• 第4章　混合开发基础篇
• 4.1　iOS平台混合开发
• 4.1.1　与iOS侧原生代码消息互通
• 4.1.2　React Native代码到iOS原生代码的消息
• 4.1.3　iOS原生代码到React Native代码的消息
• 4.1.4　与iOS OC原生代码界面的切换
• 4.1.5　应用初始界面设定
• 4.1.6　iOS混合开发中传递的参数类型
• 4.1.7　混合开发中的多线程使用
• 4.1.8　原生代码实现Promise机制
• 4.1.9　跨语言常量
• 4.2　Android平台混合开发
• 4.2.1　与Android原生代码消息互通
• 4.2.2　React Native代码到Android原生代码的消息
• 4.2.3　与Android原生代码界面的切换
• 4.2.4　Android原生代码到React Native代码的消息
• 4.2.5　应用初始界面设定
• 4.2.6　传递的参数类型
• 4.2.7　回调函数与Promise机制
• 4.2.8　监听ActivityResult与Android生命周期事件
• 4.2.9　混合开发中的多线程机制
• 4.2.10　跨语言常量
• 第5章　flexbox布局、View、Image与可触摸组件
• 5.1　flexbox布局
• 5.1.1　位置及宽、高相关样式键
• 5.1.2　决定子组件排列规则的键
• 5.1.3　决定组件显示规则的键
• 5.1.4　边框、空隙与填充
• 5.1.5　组件多样式声明与动态样式声明
• 5.2　View组件
• 5.2.1　View组件的颜色与边框
• 5.2.2　View组件的阴影与其他视觉效果
• 5.2.3　View组件的变形
• 5.2.4　View组件的回调函数
• 5.2.5　View组件的其他属性
• 5.2.6　设备放置状态、根View与onLayout回调函数
• 5.2.7　pointerEvents属性
• 5.3　Image组件
• 5.3.1　加载网络图片
• 5.3.2　加载静态图片资源
• 5.3.3　加载资源文件中的图片
• 5.3.4　动态加载手机中的图片资源
• 5.3.5　Image组件的样式
• 5.3.6　Image组件显示特性
• 5.3.7　Image组件的其他属性
• 5.4　可触摸组件
• 5.4.1　可触摸组件类型
• 5.4.2　TouchableOpacity组件
• 5.4.3　TouchableHighlight组件
• 5.4.4　其他属性
• 5.5　加深理解三大组件
• 5.5.1　使用导航栏的导航框架
• 5.5.2　等比放大无丢失显示图片
• 5.5.3　宽、高动态变化的组件呈现
• 第6章　Text、TextInput等相关知识
• 6.1　Text组件
• 6.1.1　样式键设置
• 6.1.2　其他属性
• 6.1.3　Text组件的嵌套
• 6.1.4　文本显示的阴影效果
• 6.1.5　Text居中显示
• 6.1.6　在字符串中插入图像
• 6.2　Text组件在两个平台上的不同表现
• 6.2.1　只指定fontSize，不指定height
• 6.2.2　只指定height，不指定fontSize
• 6.2.3　fontSize等于height
• 6.2.4　height大于fontSize
• 6.2.5　边框在两个平台上的不同表现
• 6.3　TextInput组件
• 6.3.1　TextInput组件样式键
• 6.3.2　TextInput组件的属性
• 6.3.3　TextInput组件iOS平台专有属性
• 6.3.4　TextInput组件Android平台专有属性
• 6.3.5　TextInput组件的成员函数
• 6.4　TextInput组件在两个平台上的不同表现
• 6.4.1　Android平台的输入下画线
• 6.4.2　父组件的alignItems键失效
• 6.4.3　只指定fontSize、不指定height
• 6.4.4　height等于fontSize
• 6.4.5　height大于fontSize
• 6.4.6　边框在两个平台上的不同表现
• 6.5　TextInput组件的生命周期
• 6.5.1　获得焦点
• 6.5.2　用户输入
• 6.5.3　用户按下提交键
• 6.5.4　失去焦点
• 6.6　软键盘与键盘事件
• 6.7　组件的引用
• 6.7.1　定义组件引用
• 6.7.2　得到系统定义的组件引用
• 6.7.3　调用组件的公开成员函数
• 6.7.4　重新设定组件的属性
• 6.7.5　获得组件的位置
• 6.8　跨平台状态栏组件
• 6.8.1　StatusBar组件属性
• 6.8.2　StatusBar组件使用示例
• 6.8.3　手机状态栏在开发中的处理
• 6.8.4　StatusBarIOS API
• 6.9　高度自增长的扩展TextInput组件
• 6.10　访问操作系统剪贴板
• 第7章　组件生命周期、数据存储及React Native应用实现步骤
• 7.1　组件生命周期
• 7.1.1　getInitialState
• 7.1.2　getDefaultProps
• 7.1.3　componentWillMount
• 7.1.4　componentDidMount
• 7.1.5　componentWillReceiveProps
• 7.1.6　shouldComponentUpdate
• 7.1.7　componentWillUpdate
• 7.1.8　componentDidUpdate
• 7.1.9　componentWillUnmount
• 7.2　读取JSON文件
• 7.3　数据持久化操作
• 7.3.1　flow语法检查器
• 7.3.2　写入数据、错误捕捉
• 7.3.3　读取数据
• 7.3.4　AsyncStorage API存储数据的无序性
• 7.3.5　删除数据
• 7.3.6　修改数据
• 7.3.7　JSON对象存储
• 7.3.8　读取JSON对象
• 7.4　数据表操作
• 7.5　React Native应用实现步骤、日记例程（上）
• 7.5.1　应用原型
• 7.5.2　基础组件结构设计
• 7.5.3　使用React Native组件搭建静态界面
• 7.5.4　React Native组件分层
• 7.5.5　实现各组件业务逻辑
• 7.5.6　日记例程（上）总结
• 第8章　ScrollView和ListView
• 8.1　ScrollView组件
• 8.1.1　ScrollView组件属性
• 8.1.2　ScrollView组件iOS平台专有属性
• 8.1.3　ScrollView组件Android平台专有属性
• 8.1.4　ScrollView组件的公开成员函数
• 8.1.5　RefreshControl组件
• 8.1.6　ScrollView组件基本用法
• 8.2　ListView组件
• 8.2.1　ListView组件的回调函数
• 8.2.2　ListView组件的其他属性
• 8.2.3　ListView组件的成员函数
• 8.3　简单的列表
• 8.3.1　准备列表的数据源
• 8.3.2　声明状态机变量
• 8.3.3　将数据源中的数据拷贝到DataSource中
• 8.3.4　定义如何渲染列表中的每一行
• 8.3.5　实现简单的列表
• 8.3.6　列表栏的高级处理
• 8.4　带分段标志的列表
• 8.4.1　准备数据源
• 8.4.2　声明状态机变量
• 8.4.3　将数据源中的数据拷贝到DataSource中
• 8.4.4　定义如何渲染每个分栏
• 8.4.5　定义如何渲染首、尾栏
• 8.4.6　列表间隔渲染
• 8.4.7　实现带分段标志的列表
• 8.4.8　总结
• 8.5　日记例程（下）总结
• 第9章　等待提示条、进度条和Switch
• 9.1　ProgressBarAndroid组件
• 9.1.1　ProgressBarAndroid组件样式设置
• 9.1.2　ProgressBarAndroid其他属性
• 9.1.3　Android平台等待提示条
• 9.1.4　React Native框架中定时器的使用
• 9.1.5　Android平台进度条
• 9.2　iOS进度条组件
• 9.2.1　ProgressViewIOS组件样式设置
• 9.2.2　ProgressViewIOS其他属性
• 9.2.3　iOS平台进度条
• 9.3　iOS平台等待提示条
• 9.3.1　ActivityIndicatorIOS组件样式设置
• 9.3.2　ActivityIndicatorIOS其他属性
• 9.3.3　iOS平台等待提示条例程
• 9.4　Switch组件
• 9.4.1　Switch组件样式设置
• 9.4.2　Switch其他属性
• 9.4.3　Switch组件的使用
• 第10章　导航组件
• 10.1　导航组件的属性
• 10.1.1　回调函数
• 10.1.2　其他属性
• 10.2　导航器
• 10.3　NavigationBar
• 第11章　手势识别
• 11.1　PanResponder API
• 11.2　监视器
• 11.2.1　指定监视区域
• 11.2.2　定义监视器相关变量
• 11.2.3　准备监视器的事件处理函数
• 11.2.4　建立监视器
• 11.2.5　将监视器与监视区域挂接
• 11.3　监视事件的生命周期
• 11.3.1　单次点击事件的生命周期
• 11.3.2　单次点击事件处理
• 11.3.3　移动手势事件的生命周期
• 11.3.4　监视器异常事件
• 11.4　手势识别处理例程
• 11.4.1　单点手势——点击、拖动选择百分比参数
• 11.4.2　单点手势——带导槽的滑动来电接听或拒接界面
• 11.4.3　单点手势——滑动解锁屏幕界面
• 11.4.4　单点手势——单点任意方向拉动选择界面
• 11.4.5　两点手势
• 第12章　网络
• 12.1　获取网络状态
• 12.1.1　得到当前网络状态
• 12.1.2　监听网络状态改变事件
• 12.1.3　简单判断是否有网络连接
• 12.1.4　判断当前连接是否收费
• 12.2　通过HTTP、HTTPS与网络侧交换数据
• 12.2.1　发送请求
• 12.2.2　接收响应
• 12.3　在React Native开发中使用AJAX技术
• 第13章　网页浏览器、音视频媒体播放
• 13.1　WebView组件样式设置
• 13.2　WebView组件其他属性
• 13.2.1　非回调函数属性
• 13.2.2　回调函数属性
• 13.2.3　平台独有属性
• 13.2.4　WebView组件成员函数
• 13.3　网页浏览器使用例程
• 13.3.1　浏览网页例程
• 13.3.2　加载本地网页例程
• 13.4　音视频媒体播放
• 第14章　图片的遍历、存取与显示
• 14.1　React Native开发中iOS平台链接库的使用
• 14.2　获取手机中所有的图片信息
• 14.3　图片信息详解
• 14.3.1　Android平台图片信息
• 14.3.2　iOS平台图片信息
• 14.4　显示从CameraRoll API得到的图片
• 14.5　为用户提供图片选择界面
• 14.6　图片的保存与读取显示
• 14.6.1　保存图片数据
• 14.6.2　读取并显示图片
• 第15章　选择器、位置相关和应用状态
• 15.1　日期、时间选择器
• 15.1.1　DatePickerAndroid API
• 15.1.2　TimePickerAndroid API
• 15.1.3　DatePickerIOS组件
• 15.2　Picker组件
• 15.2.1　Picker组件的样式设置
• 15.2.2　Picker组件的属性
• 15.2.3　Picker.Item组件属性
• 15.2.4　Picker组件例程
• 15.3　PickerIOS
• 15.4　MapView组件
• 15.4.1　MapView组件样式设置
• 15.4.2　MapView组件特有的跨平台属性
• 15.4.3　MapView组件例程
• 15.5　AppState API
• 15.5.1　AppState API用途与用法
• 15.5.2　AppState API例程
• 15.6　获取地理位置
• 15.7　VibrationIOS API
• 第16章　使用ES6语法开发
• 16.1　React Native组件导入
• 16.2　属性声明
• 16.3　成员变量声明
• 16.4　状态机变量声明
• 16.5　回调函数绑定
• 16.6　类的静态成员变量与静态成员函数
• 第17章　混合开发高级篇
• 17.1　使用Objective-C语言创建私有的React Native组件
• 17.1.1　增加FLAnimatedImage链接库
• 17.1.2　创建视图管理类
• 17.1.3　封装开源代码中的视图类
• 17.1.4　在React Native侧调用私有组件
• 17.1.5　例程运行效果
• 17.2　使用Swift语言创建私有的React Native组件
• 17.2.1　整合开源项目
• 17.2.2　建立组件管理者和桥接头文件
• 17.2.3　Objective-C与React Native接口部分
• 17.2.4　使用Swift语言实现组件控制
• 17.2.5　在React Native侧调用私有组件
• 17.2.6　例程运行效果
• 17.3　使用Android SDK创建私有的React Native组件
• 17.3.1　准备原生代码UI组件
• 17.3.2　实现原生UI管理类
• 17.3.3　创建原生UI实例
• 17.3.4　实现对属性的支持
• 17.3.5　建立原生UI包
• 17.3.6　注册原生UI管理类
• 17.3.7　对应的React Native侧实现
• 17.3.8　运行俯视视图例程
• 第18章　项目配置、生成发布版本安装包及其他
• 18.1　iOS平台项目配置
• 18.2　iOS平台应用发布
• 18.3　Android平台项目配置
• 18.4　Android平台应用生成发布版本安装包
• 18.4.1　生成发布密钥
• 18.4.2　修改gradle配置文件
• 18.4.3　生成发布版本安装包
• 18.5　其他组件与API
• 18.5.1　动画相关
• 18.5.2　其他未讨论的组件与API
• 附录A　ECMAScript2015语法参考