React Native是Facebook公司推出的强大的、开源的跨平台移动应用开发框架。它能大幅减少跨平台移动应用开发的工作量(相比原生代码开发能减少至少50%),并且代码结构清晰、简单易懂。同时React Native框架采用模块化的结构,使应用版本的更新迭代非常简单。随着它的日趋成熟,React Native必然会成为移动应用开发的主流技术。
本书由浅入深,系统发介绍了使用React Native框架跨平台开发所需要用到的知识。本书每一章都专注于阐述移动应用开发某一方面的知识,配合若干个原创的、精简的例程,能让读者系统、快速地掌握该方面知识。
本书的结构是按一个有基本的编程基础知识,刚学习JavaScript基本语法的读者的最佳学习路径来编写的。有一定基础的开发人员也可以将本书作为一本React Native开发的“字典”来使用,在开发时可以快速查找相关知识点的细节。
希望通过本书,能将最新的React Native开发技术介绍给国内广大开发者,让国内移动应用开发进入一个新的时代,让开发者用比较少的精力就能高效、美观地完成移动应用开发。
资深技术专家良心原创精品畅销升级,掏心窝地手把手教跨平台移动应用开发
预备知识
学习React Native开发需要基础的JavaScript编程知识。我估计有一部分读者可以在某个手机平台使用该平台原生语言进行移动应用开发,但对JavaScript只是有所耳闻。如果是这种情况,不用担心。读者只需要随便找一本JavaScript入门级的书籍(甚至是网上的教学性网页),阅读关于基础语法的章节,花上一天时间(包括找资料的时间)学习相关知识点,接下来就可以通过本书学习React Native开发了。所需要的知识点有:
(1)JavaScript语法。包括语句、注释、变量、数据类型、数组(注意关联数组,Java、C++的数组中没有这个概念)、对象的基本知识。
(2)操作运算符。这个与Java、C++基本上是一样的,读者快速过一下就行。
(3)条件语句、循环语句、switch语句。这与Java、C++基本上是一样的,读者快速过一下就行了。
(4)函数。JavaScript中函数也是一种变量,知道了这一点,其他与Java、C++基本上是一样的,读者快速过一下就行了。
(5)对象。JavaScript的对象定义、实现比Java、C++宽松很多。读者得稍微适应一下。
这些基本的知识点,大多数与Java或者Objective-C的相关知识点很类似。如果读者有基础,阅读这些知识点最多只需要一天的时间。读者不需要搭建JavaScript的开发环境来练习、巩固这些知识点,因为在React Native的开发环境中编写代码就可以练习这些基本的JavaScript知识点,在React Native学习中就会巩固这些JavaScript基本知识。
React Native在开发中用到了其他JavaScript的高级知识点与ES 6的一些新特性,但读者不需要马上去学习这些内容。在通过本书学习React Native开发的过程中若需要使用JavaScript高级知识点,会指出在附录A的什么位置讲解了这些高级知识点,便于读者快速查看。附录A不是JavaScript知识点的全面讲解,只是让读者对React Native开发中需要使用到的JavaScript知识点有足够理解以进行React Native开发。
相关下载地址
笔者希望读者在阅读本书时,能在理解的基础上将例程代码输入到电脑中。输入的过程是一个消化吸收的过程。输入完成后,运行代码,并且按照提示或者针对自己有疑虑的地方进行修改,以便深入理解各个知识点。
正因为如此,本书前面章节中那些短小精悍的例程并没有附在一张光盘上,或者在网上提供下载地址,而是需要读者自己手动输入电脑。
本书还有一些不需要读者手动输入的代码,笔者在GitHub上提供了一个网址供读者自行下载。网址是:https://github.com/es6rn。
本书结构
本书讨论的React Native开发特性覆盖了2017年3月2日发布的React Native 0.42.0版本的绝大部分特性。没有讨论的部分在书末有提及。
首先需要说明的是,本书讨论的知识以跨平台(Android平台与iOS平台)开发为主,书中各章节的绝大部分知识点都是跨平台实现的。只有极小部分是分平台实现的,这一小部分在讨论前都会说明该部分知识适用于哪个平台。
本书的结构是按一个有基本的编程基础知识,刚学习JavaScript基本语法的读者的最佳学习路径来编写的。通过一个个精简的例程,清晰地阐述一个个基本思想。例程尽可能地精简,并且所有例程都是笔者花了大量时间为初学者构思而成的。
本书体例说明
代码与代码说明
本书例程中有大量的代码说明,通过注释的方式与代码同时展示出来。例如:
var IncomingCall = React.createClass({
watcher: null, //用来记录监视器
startFromLeft:true, //用来判断用户最先按下的是最左侧还是最右侧
moveNeedhandle:false, //用来判断监测到的移动事件是否需要处理
注释以粗体字显示以提醒读者注意。读者在自己的开发环境中输入例程时不需要输入注释。
React Native代码中的JSX部分代码不能使用这种注释方式,本书为了统一注释风格还是使用了这种注释方式。读者明白了这一点后,在自己输入代码试验时,请将代码中的注释自行去掉。
注意和提示
注意和提示,是需要提醒读者特别注意的内容。在本书中使用带背景色的字体显示。
致谢
感谢我的父亲阙光金老师与我的母亲袁雪英老师从小到大给我的无私的爱。很抱歉无论我如何努力,也无法回报二老深恩的万分之一。
感谢我的姐姐阙喜戎与姐夫王纯,没有你们的鼎力支持,就没有今天的我。
感谢王汝馨伯父与曾钰伯母,谢谢你们对我的关怀与照顾。
感谢廖建新教授、饶牧老师在我学习工作期间对我的关怀与指导。感谢在我7年北京邮电大学学习期间为我授业解惑的所有老师,谢谢你们!
感谢React Native开发团队,感谢所有参与React Native开发的贡献者。无数移动开发者因为你们无私的奉献而受益。
感谢电子工业出版社郭立总经理、孙学瑛编辑等为审校此书而付出的辛勤工作,以及为此书能快速出版而付出的巨大努力。你们辛苦了!
感谢在工作和生活中帮助过我的所有人,感谢你们,正是因为有了你们,才有了本书的面世。
关于勘误
虽然花了很多时间和精力去核对书中的文字、代码和图片,但因为时间仓促和水平有限,书中仍难免会有一些错误和纰漏,如果大家发现什么问题,请反馈给我,相关信息可在下载本书代码的GitHub页面反馈。
第二版的
高度的解释:在各组件的样式定义中,都没有设置高度。为自适应高度。
index.ios.js代码如下:
textInputStyle: {
margin: widthOfMargin,
backgroundColor: ‘gray’,
// height: 40,
fontSize: 20
}
在iOS10中运行(真机和模拟器都一样),如果不设置height,文本框都显示不出来(placeholder的内容显示出来了,但是backgroundColor没显示出来)。我用的react native版本为:
“dependencies”: {
“react”: “16.0.0-alpha.6”,
“react-native”: “0.44.0”
},
设置高度后就能正常显示了。
TextInput组件中并没有password={true}这个属性声明,应该改为secureTextEntry。在前面的代码示例中同样出错了。
TextInput
箭头函数后的return语句前后要有大括号,不然会报错。
应为“类名”而不是“类命”
应该是“箭头”而不是“剪头”