React Native移动开发实战(txt+pdf+epub+mobi电子书下载)


发布时间:2021-01-25 12:34:34

点击下载

作者:袁林

出版社:机械工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

React Native移动开发实战

React Native移动开发实战试读:

前言

随着手机和移动互联网技术的日益成熟,移动应用的领域也从如何开发,发展到如何更高效、更低成本地开发。传统的原生平台(iOS、Android)开发技术虽然比较成熟,但由于开发效率和成本的限制,已经越来越无法满足移动互联网应用的开发需求。

所以,具有简单、迅速、跨平台的优势,而且基于Web开发语言和布局技术的React Native得以迅速流行,并一举夺得跨平台开发技术的头筹。

目前市场上大多数React Native书籍主要以翻译和讲解官方文档为主,并未从开发实际应用出发,通过典型案例来指导读者提高开发水平。本书以实战为主旨,通过完整的电商类App项目实例,来介绍React Native中常用的组件、API、布局、第三方组件和原生接口,让读者全面、深入、透彻地理解React Native主流的开发和设计方法,提升实际开发水平和项目实战能力。

本书涉及的概念较多,下面给出一个技术点云图,希望读者有所了解。

本书的进阶顺序,也给出如下一个图,便于读者了解。

本书特色

1.每一步都有详细的源码和实例参考

为了便于读者理解本书内容,提高学习效率,本书的所有内容都有详细的源码和实例参考。对于这些源码和实例,作者均亲自编写和验证,杜绝复制、粘贴代码以敷衍读者的不负责任行为。本书源码可以在https://coding.net/u/learnreactnative/p/learnreactnative-sourcecode/git里下载。

2.内容涵盖React Native开发的各个方面

本书涵盖React Native组件、API、布局、第三方组件以及原生接口等React Native应用开发的各个方面,尽量保证不出现知识“死角”。凡是涉及的一些技术(如原生、瀑布流、耦合性和JSON),也给出了概念或原理的解释。

3.结合工具助力更高效的React Native开发

在本书“实战”讲解的过程中,详细介绍了React Native开发工具Nuclide的使用、React Native命令行工具的用法及各种调试工具(包括布局、断点及实时加载等)的使用,不仅教读者如何开发,还教读者如何更高效地开发。

4.项目案例典型,实战性强,有较高的应用价值

本书以开发一个电商类应用为例,涵盖了React Native应用开发中会用到的所有重点知识,设计和源码做到拿来可用,方便应用开发者随时查阅和参考。

5.收获的不仅仅是React Native平台和编码

对于一些学习能力较强的读者,完全可以在React Native开发文档的帮助下快速学习和掌握React Native。而本书希望读者在掌握平台和编码之外,还能够了解实际应用开发过程中涉及的软件开发流程、应用架构设计、代码重构技巧,以及原生平台与其他跨平台开发的相关知识,让读者融会贯通地理解应用开发技术。

本书内容及知识体系

第1篇 React Native入门和基础(第1~2章)

本篇介绍了跨平台开发的主流方案和React Native基础知识,主要包括开发环境搭建、React Native命令行工具和React Native布局调试。

第2篇 React Native应用开发实战(第3~7章)

本篇介绍了React Native实际应用开发中常用的技术,主要包括基本组件、使用第三方组件、搭建基于Node.js的服务器为应用绑定真实数据、fetch API、AsyncStorage/SQLite/Realm数据库存储、更多React Native组件和API的用法、原生平台接口开发等。

第3篇 React Native混合编程(第8~10章)

本篇主要总结和回顾了前7章所开发的电商类应用的技术和架构,主要包括应用的文件结构、Flexbox的整体布局、应用的逻辑结构、应用的通信过程及进一步改进的地方和思路,其中就包括了redux开发框架。

第4篇 App的发布和更新(第11~12章)

本篇主要介绍了React Native应用打包和发布的全过程,配以详细的截图说明,并且对React Native应用发布后的热更新实现和方案CodePush做了详细的示例说明。

适合阅读本书的读者

·React Native学习人员;

·iOS平台应用开发工程师;

·Android平台应用开发工程师;

·Web前端开发工程师;

·Node.js服务端开发工程师;

·计算机相关专业的学生;

·专业培训机构的学员;

·软件开发项目经理。

本书作者

本书由袁林主笔编写。其他参与编写的人员有高旭、贺庆端、黎林、李伟浩、刘成智、刘利、刘源、谭建利、吴贵文、吴娟、夏秀英、肖太平、郑星。

致谢

感谢本书的编辑,让我有机会和本书结缘。感谢我的伙伴们:邵长磊、刘冬冬、袁方、袁满、翟绍虎、洪敏、郭晨光及张砚,与我一起探讨新技术并和React Native结缘。感谢我的妻子韩丽、女儿可可及我的父母,写作占用了我很多陪伴家人的时间和精力,正是有了家人的支持,才得以坚持下去。

最后还要感谢读者,本书的价值因你们而存在。编者第1篇React Native入门和基础

第1章 为什么要学习React Native

第2章 全局解析React Native开发的基础技术第1章为什么要学习React Native

无论读者是移动平台开发者,还是Web前端开发者,想必对现在“大红大紫”的React Native都有所耳闻。那么,除了“乘着Facebook这棵大树好乘凉”的优势之外,React Native到底是何方“神圣”,有什么令大家“趋之若鹜”的优点呢?下面带着这样的好奇,来随本书一探究竟吧!

本章主要内容有:

·React Native与React.js的对比。

·为什么说React Native是跨平台的。

·React Native应用的结构。

·React Native的特点。

·React Native的环境搭建。

·创建第一个React Native应用。1.1 看透React Native

React Native(http://facebook.github.io/react-native/)第一次进入公众的视野是在2015年1月的React.js Conf(http://conf.reactjs.org/)上,随后,同年5月份,Facebook在F8Conference(https://www.fbf8.com/)上正式宣布:React Native项目(如图1.1所示)在Github开源。结果一天之内,就收获了5000多颗星,受关注程度可见一斑!图1.1 React Native Logo小知识:React.js Conf是指Facebook的React开发者大会,F8Conference是指Facebook的开发者大会,Github是全球最大的软件项目托管平台,也被戏称为“人类的代码仓库”。1.1.1 React Native与React.js

想必读者在还没弄清React Native之前,又发现了一个“新朋友”React.js(下文简称React),那到底什么是React呢?它和React Native又是什么关系呢?

先来看看Facebook官方(https://code.facebook.com/projects/176988925806765/react/)对React的定义:React is a JavaScript library for building user interfaces

从上述官方的定义可以知道:React是一个用于前端UI开发的JavaScript库。和其他类似的前端框架相比,例如,老牌的Backbone(http://backbonejs.org/)、Google推出的Angular(https://angularjs.org/)和以轻量级著称的Vue.js(http://cn.vuejs.org/),React最大的不同是提出了Virtual DOM(即虚拟DOM)的设计,可以大大提升页面渲染的效率。小知识:移动平台开发很好理解,即移动平台上(例如Apple的iOS平台,Google的Android平台)的软件开发,开发语言和技术主要有Objective C、Swift及Java等。而前端开发是相对于后端(又称服务器端)开发而言的,前端主要负责开发通过浏览器和用户交互的部分,开发语言和技术主要有HTML、CSS及JavaScript等。

但是,Facebook不仅仅满足于React对前端开发技术的革新,又将React的设计移植到原生开发中,从而诞生了React+Native结合的产物,即React Native。

虽然,React Native刚开始只支持iOS App开发,但是从2015年9月起,React Native也支持Android App开发,而且随着微软、三星等“IT大佬”的加入,React Native还将支持更多的移动平台,例如,Sansung的Tizen平台(https://www.tizen.org/)、Microsoft的Window Phone(http://microsoft.github.io/code-push/articles/ReactNativeWindows.html)。

所以,简单来说:

·React Native和React使用了相同的开发语言JavaScript和相同的设计理念React。

·React Native和React运行的环境和平台却是完全不同的,React Native是基于移动平台(如iOS、Android等),而React是基于浏览器。提示:国内网络环境下访问React Native官网(http://facebook.github.io/react-native/)可能较慢,读者可以访问国内的中文资源网站,例如React Native中文网(http://reactnative.cn/),或者自行搜索加快React Native官网访问速度的办法。1.1.2 React Native的跨平台

简单了解了React Native的由来之后,读者或许会有这样的疑问,开发移动平台App使用原生开发平台和语言就好了,为什么要出现使用React Native来开发移动平台App的技术呢?换句话说,React Native到底可以解决什么问题呢?

在进一步讨论之前,笔者觉得有必要明确一下什么是原生应用和跨平台应用。

1.原生应用

所谓的原生应用是指:使用原生开发语言、工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度,包括平台的稳定性、运行时的性能及完善的生态。小知识:所谓的“生态”应该算是比较抽象的概念,开发平台的生态圈包含了很多方面,从硬件上芯片和各种电子元器件的生产、供应,到软件上所使用的语言、开发工具及第三方开源库的数量质量,以及人的方面,如开发者的数量、水平等因素。

但是,原生应用开发也不是没有任何缺点,那就是开发成本较高,导致开发效率相对较低。例如,当一个产品需要支持多种类型的移动终端时,就需要熟悉多个原生平台开发的工程师。

2.跨平台应用

为了解决产品满足多个平台的需求,就有了所谓的跨平台应用开发。根据实现跨平台方案的不同,也就有了以下几种常见的跨平台解决方案。

·混合应用开发:在移动浏览器中嵌入HTML页面来开发移动应用,代表的有Apache Cordova(http://cordova.apache.org/),以及基于Apache Cordova衍生的Inoic(http://ionicframework.com/)等,如图1.2所示。

·跨平台的语言:例如,基于.NET和C#的Xamarin(https://www.xamarin.com/),以及基于Ruby的RubyMotion(http://www.rubymotion.com/cn/),如图1.3所示。图1.2 Apache Cordova LOGO图1.3 Xamarin LOGO

·React Native:使用的是Web开发语言(JavaScript)和环境(Node.js)。除了本书介绍的React Native之外,类似的技术方案还有NativeScript(http://www.telerik.com/nativescript)、Weex(http://weex-project.io/)等,如图1.4所示。图1.4 Weex LOGO提示:想要了解关于更多React Native的架构和原理,可以参考1.1.3节。1.1.3 解剖React Native应用的结构

在了解完这么多关于React Native的故事和优势之后,让我们走近React Native,来进一步了解React Native的原理和架构。

React Native应用的整体结构如图1.5所示。图1.5 React Native应用的整体结构

通过之前的介绍和图1.5可以看出:React Native应用开发使用的是与React相同的开发语言JavaScript和设计思想React,而底层仍然是基于原生平台的。这样,不同平台的适配就交由React Native平台去处理,而开发者只需要专注于React Native平台应用开发本身,体现出的优势如下。

·应用层的开发变得简单、高效和跨平台。

·应用稳定性、运行时的性能和原生平台接近。

·在理解React Native原理之后,开发者也可以根据实际的产品需求开发自己的React Native组件,以复用已有原生平台的大量优秀组件。1.2 React Native的特点

那么,作为跨平台应用开发的“新贵”,React Native相比其他跨平台技术到底有哪些优势呢?1.2.1 其一:Learn Once,Write Anywhere

这句话是React Native官网(http://facebook.github.io/react-native/)对React Native的概述,简单明了地概括了React Native的最大特点和优点。

只需要学习React Native这一种开发方式(包括平台、语言和开发环境等)就可以开发多个不同平台的App。

这句话简单来说就是Learn Once,Write Anywhere,这也是React Native的宣传广告,如图1.6所示。图1.6 Learn Once,Write Anythere宣传广告小知识:除了React Native提出的Learn Once,Write Anywhere的口号,Java语言也提出过类似的口号Write Once,Run Anywhere,两者看起来类似,但其实是完全不同的。React Native就像上面介绍的,降低的是学习成本,针对不同平台可能还需要单独开发;而Java语言的意思是只需要开发一次,就可以成功运行在不同的平台和设备上。

目前,React Native对iOS、Android平台的支持已经非常好了,在不远的将来,应该还会支持Windows、Tizen等更多的移动平台。

而且,React Native的大多数组件也是可以在多个平台复用的,所以学习了React Native开发之后,完全可以胜任多个平台的开发任务且不需要很高的额外学习成本,大大降低了开发成本。1.2.2 其二:简单易学的开发语言

React Native开发是基于JavaScript语言的,虽然JavaScript也是一门灵活、强大且复杂的语言,但是对于新人来说,上手速度相比Objective-C或Java等还是要快得多。而且,由于JavaScript严格模式的使用以及ECMAScript2015(下文简称ES6)标准的推出,JavaScript被人诟病的各种语言问题也大大减少。

不仅如此,Facebook为了进一步提高代码可读性和开发效率,还扩展出了JSX语法,即一种可以在JavaScript代码中直接书写HTML标签的语法糖。

例如,一个典型的React Native项目的JavaScript代码看起来是这样的:01 export default class ch02 extends Component { // 每个页面可以理解成一个组件02 render() { // 渲染页面的函数03 return (04 // 页面根View05 06 Welcome to React Native!07 08 09 To get started, edit index.ios.js10 11 12 Press Cmd+R to reload,{'\n'}13 Cmd+D or shake for dev menu14 15 16 );17 }16 }

除了开发语言使用JavaScript之外,在React Native开发中,样式和布局的技术相比原生平台也是比较简单的。

React Native的样式使用了类似CSS的规范,只是根据JavaScript的语法要求将命名方式改成了“驼峰命名法”,例如,Web开发中的background-color要写成backgroundColor。

React Native的布局使用了Flexbox布局方式,Flexbox是Flexible Box的缩写,又称“弹性盒子布局”。Flexbox布局不仅使用简单,最大的优势还在于提供了自适应显示设备和屏幕大小的能力,从而可以很好解决iOS、Android等屏幕适配问题。

例如,一个典型的React Native项目中的样式和布局代码看起来是这样的:01 const styles = StyleSheet.create({02 container: { // 页面根View的样式03 flex: 1,04 justifyContent: 'center',05 alignItems: 'center',06 backgroundColor: '#F5FCFF'07 },08 welcome: { // “欢迎”文本的样式09 fontSize: 20,10 textAlign: 'center',12 margin: 1012 },13 instructions: { // “说明”文本的样式14 textAlign: 'center',15 color: '#333333',16 marginBottom: 517 }18 });提示:关于JSX和Flexbox布局的更多介绍,可以参考本书第2章的内容。1.2.3 其三:接近原生应用的性能和体验

对于React Native上述的两个优点,混合应用开发的方式其实也都有,但是,混合应用开发的方式在实际开发中却存在性能和体验不佳的先天不足(其原理是在移动浏览器里嵌入HTML页面,导致原生平台的性能优势无法充分发挥出来)。

混合应用开发方式从PhoneGap发展到Apache Cordova,而且衍生的Ionic也都在不断强调和优化性能,但是现阶段,在移动浏览器中嵌入HTML页面的运行效率,仍然无法和原生应用相媲美。

而React Native虽然使用的是类似混合应用开发的语言,但是其实现机制却完全不同:React Native的底层仍然是基于原生平台的!所以,React Native在性能和体验上与原生应用几乎没有太大差别,用户很难区分所使用的App到底是原生开发的还是React Native开发的。1.2.4 其四:完善的生态系统

生态系统是衡量一个开发平台成熟度的重要标志,所以开发者在选择任何开发平台时,很有必要了解该平台的生态状况。

React Native有着非常庞大的开发者社区和很高的活跃度,这点从React Native在Github上线第一天5000多颗星,截至2017年1月4日40000多颗星、9000多次Fork以及9000多次提交就可以看出,如图1.7所示。图1.7 React Native项目在Github上的关注度和贡献

Google Trends(https://www.google.com/trends/explore?date=today%2012-m&q=ios%20development,android%20development,react%20native)也反映出了React Native开发的趋势和热度,如图1.8所示。图1.8 Google Trends上React Native的趋势和热度

同时,Facebook也在大力支持和推广React Native,并推出了官方的调试工具React Developer Tools(https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgof adopljbjfkapdkoienihi)和开发工具Nuclide(https://nuclide.io/),如图1.9所示。图1.9 Facebook推出的React Native开发工具Nuclide

另外,网络上还有大量优秀的开源项目可供学习和参考,例如:

·React Native开源库检索网站JS.coach(https://js.coach/react-native)。

·React Native学习资源汇总项目awesome-react-native(https://github.com/jondot/awesome-react-native)。

总之,在学习和开发React Native的路上,不仅有本书可以参考,还有非常多的资源和帮助,借用一首歌名来说:You will never walk alone。1.3 搭建React Native开发环境“磨刀不误砍柴工”,在正式开发React Native应用之前,需要先搭建好React Native的开发环境。搭建React Native开发环境有以下几个主要步骤。

·原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools。

·Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScript代码的。

·React Native(https://www.npmjs.com/package/react-native/):安装React Native命令行工具。

·其他辅助工具:代码编辑器Nuclide(https://nuclide.io/)、远程调试工具Chrome浏览器(http://www.google.cn/chrome/browser/)等。注意:iOS开发是依赖于macOS的,所以使用React Native开发iOS应用需要使用macOS。1.3.1 安装原生开发工具——Android

由于React Native应用仍然是基于原生平台(参考本书1.1.节React Native的结构),所以搭建React Native的前提是安装原生开发工具。(1)安装Java Development Kit(JDK),从JDK官网(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)下载操作系统相应版本安装即可。安装成功后可以通过如图1.10所示的方法进行验证。图1.10 查看JDK安装是否成功及Java版本号(2)再安装Android开发工具:Android Studio and SDK Tools。从Android Studio官网(https://developer.android.com/studio/index.html)分别下载Android Studio及命令行工具Android SDK Tools。提示:国内网络情况下访问Android相关网站较慢,所以读者可以搜索国内的Android资源网站进行下载。(3)第一次打开Android Studio时,需要在“设置”中配置Android SDK Tools的路径Android SDK Location,如图1.11所示。图1.11 Android Studio中配置Android SDK Tools路径(4)成功配置Android SDK Tools的路径之后,还要下载和安装SDK相关工具,如图1.12所示。图1.12 安装Android SDK Tools相关工具(5)此时,还需要将Android SDK Tools的路径加入到系统变量PATH中。提示:无论是JDK,还是Android SDK Tools,以及以后要安装的其他开发工具(如Node.js、npm、React Native等),根据实际情况,都需要添加到系统变量PATH中,否则会发生找不到该工具或命令的错误。当然,有时候安装程序会自动完成该配置,请读者知悉。

对于Linux或macOS系统,将下面的配置添加到~/.bashrc文件中。export ANDROID_HOME=/path/to/android/sdk/toolsexport PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools

对于Windows系统,将下面的路径添加到环境变量PATH中。

·Android SDK Tools文件夹路径。

·Android SDK Tools文件夹里的tools文件夹路径。

·Android SDK Tools文件夹里的platform-tools文件夹路径。

添加效果如图1.13所示。图1.13 添加Android SDK Tools路径到Windows系统变量PATH提示:如果正确配置之后,还是找不到Android SDK Tools工具或命令,可以尝试重新加载环境变量或重启终端。1.3.2 安装原生开发工具——iOS

首先需要再次提醒读者的是,使用React Native开发iOS应用是需要macOS的,所以经济条件允许的话,最好购置一台Mac电脑。只有在使用React Native同时开发iOS和Android应用,才能发挥出React Native跨平台的优势。

Xcode的安装比较简单,在macOS中登录Apple ID后,打开App Store搜索Xcode安装即可,如图1.14所示。注意:请务必在Apple官网或App Store下载Xcode安装程序。2015年9月发生的轰动国内的XcodeGhost事件,起因就是因为开发者下载并使用了非官方被植入非法代码的Xcode安装程序。图1.14 在App Store中查找并安装Xcode1.3.3 安装Node.js

打开Node.js官网的下载页面(https://nodejs.org/en/download/),下载当前系统对应的安装包,这里以macOS系统为例,下载的安装包为node-v6.9.2.pkg。提示:推荐读者使用最新的LTS版本,因为官方维护的周期较长,功能和稳定性较好。(1)下载完成后双击安装包进行安装,如图1.15所示。(2)根据安装向导提示,单击相应的“继续”或“同意”按钮,最后单击“安装”按钮进行安装。安装成功后,如图1.16所示。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载