作者：王利华
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
React Native入门与实战试读：
前言
React Native开启了开发原生App的新方式，不仅提高了开发效率，同时提高了App的用户体验。相比Web App而言，React Native可以使用原生的组件和API，这样就可以释放Native的能力和体验；相比Native开发而言，前端开发者可以使用JavaScript开发原生应用，这样开发效率将会得到很大的提高。本书目的
目前，国内针对React Native讲解的图书和资料都很少，阅读本书可以帮助你更好地开发React Native应用。或许你已经了解React Native的基本内容，或许你已经开始了React Native的开发之旅，无论如何，本书都希望可以带领大家拥抱React Native，使用React Native。当然，本书也希望弥补中文资料在这方面的欠缺。内容和组织结构
本书的内容是我们在实践过程中总结得到的，一共分为4部分。
第一部分为基础语法篇，共两章内容，主要介绍了React Native的开发基础知识。
第1章介绍了React Native的环境搭建、React与React Native之间的关系，以及如何学习React Native。
第2章主要介绍了React Native的开发基础知识，包含flexbox布局、JSX语法，并且详细介绍了React Native创建项目的过程。
第二部分为API和组件篇，共4章内容，主要介绍了React Native的API、组件以及Native扩展和组件的封装。
第3章介绍了React Native常用组件，包含View组件、Text组件、NavigatorIOS组件、TextInput组件、Touchable类组件（TouchableHighlight、TouchableOpacity和TouchableWithoutFeedback）、Image组件、TabBarIOS组件和WebView组件。
第4章介绍了React Native常用的API，包含AppRegistry、AsyncStorage、AlertIOS、ActionSheetIOS、PixelRatio、AppStateIOS、StatusBarIOS、NetInfo、CameraRoll、VibrationIOS、Geolocation、网络数据请求的应用以及定时器和动画。
第5章介绍了React Native的实现原理以及在原生组件和API上的扩展，并且以一个“图表”组件为案例进行实战讲解。
第6章介绍了使用JavaScript封装React Native组件，主要实现了二级菜单组件、日历组件以及初步介绍了开源组件的用法。
第三部分为App更新和上架篇，共一章内容。
第7章介绍了App的动态更新和上架过程。
第四部分为实战篇，共3章内容，介绍了如何使用React Native开发原生App。
第8章介绍了使用React Native和Node.js开发企业内部通讯录应用——“百灵鸟”App。
第9章介绍了使用React Native Geolocation API和高德地图API开发LBS应用——“附近”App。
第10章介绍了使用豆瓣开放API开发一款搜索App，主要包含图书、电影和音乐搜索。本书特色介绍
本书的特色主要在于理论结合实战，读者不仅可以了解React Native的API和组件，同时可以通过案例和实战深入学习。源代码
本书包含的代码及其案例可以到https://github.com/vczero/React-Native-Code下载或者到图灵社区本书主页免费注册下载。本书创作时间较短，难免会有疏漏，恳请各位读者斧正。王利华2015年11月于上海凌空SOHO第一部分基础语法篇第1章React Native简介
React Native一经Facebook开源，就引起了业界的关注，越来越多的开发者开始尝试在生产中使用它。React Native为JavaScript开发跨终端应用提供了更加丰富的想象空间。下面就开始我们的React Native开发之旅吧。1.1 环境搭建
工欲善其事，必先利其器。首先，我们需要搭建开发环境（整本书都是以Mac OS X系统为基础的）。React Native主要依赖的环境如下所示。
Mac OS X操作系统。
推荐使用Xcode 6.4或者更高版本。
安装Node.js 4.0或者最新版本。
建议使用Homebrew安装：watchman和flow。
下面我们一步步来安装开发环境。1.1.1 安装Node.js
打开浏览器，在浏览器中输入地址https://nodejs.org/，此时打开的是Node.js的官网，从中可以看到最新的版本以及下载按钮。
这里下载的是node-v4.1.0.pkg。等待下载完成后，我们开始安装Node.js。双击node-v4.1.0.pkg文件，將弹出如图1-1所示的界面。图1-1 Node.js安装启动界面
在图1-1中，我们可以看到This package will install Node.js v4.1.0 and npm v2.14.3 into /usr/local/这句话，这表明将会安装Node.js 4.1.0版本和npm 2.14版本。
接着点击“继续”按钮，会看到许可界面，再点击“继续”按钮，将看到许可提示，如图1-2所示。图1-2 Node.js安装许可
点击“同意”按钮，会出现如图1-3所示的界面。图1-3 确认为用户安装Node.js
这里我们点击“继续”按钮，得到的界面如图1-4所示。图1-4 选择安装目录
在图1-4中，我们不更改安装位置，直接使用默认值即可。然后点击“安装”按钮，输入你的电脑的密码（一般用户都设置了电脑密码），再点击“安装软件”开始安装程序。如图1-5所示，这里显示了“安装成功”，表示Node.js安装成功，此时直接点击“关闭”按钮即可。图1-5 安装成功界面
在图1-5中，我们可以看到如下信息：Node.js was installed at/usr/local/bin/nodenpm was installed at/usr/local/bin/npmMake sure that /usr/local/bin is in your $PATH.
以上信息表明，Node.js安装在/usr/local/bin/node目录下，npm安装在/usr/local/bin/npm目录下。我们可以通过Mac终端命令切换到/usr/local/bin/目录下，从中可以看到安装的Node.js和npm，如图1-6所示。上述信息同时告诉我们，要确保/usr/local/bin在我们的环境变量%PATH中，一般默认都在。图1-6 Node.js和npm安装目录
此时，我们在终端中输入命令node -v，就可以看到刚才安装的Node.js的版本（即v4.1.0），表示Node.js安装成功，如图1-7所示。现在我们就可以在终端中写些简单的程序了。需要说明的是，这里我们就不介绍Node.js了，读者可自行查阅相关资料。图1-7 Node.js1.1.2 安装React Native
Node.js 安装完成后，可以使用它干很多事情。但是，本书的主题是React Native，所以我们要继续搭建React Native的开发环境。
在正式安装React Native之前，需要确保以下环境是可用的。
Node.js已经安装且在环境变量中。如果没有安装，可以参考1.1.1节。
Xcode已经安装且版本最好是6.4以上版本。Xcode的安装这里就不做介绍了。
推荐安装Homebrew，同时通过Homebrew安装watchman和flow。
通过Homebrew安装watchman和flow的命令如下：$ brew install watchman$ brew install flow
现在万事具备，只欠东风。我们通过npm安装react-native-cli的命名行工具。在Mac终端中输入如下命令，其中-g表示全局安装：$ npm install -g react-native-cli
如果在安装过程中发现需要管理员权限，可以给命令添加sudo，然后输入管理员密码即可：$ sudo npm install -g react-native-cli
安装成功后，看到的界面如图1-8所示。图1-8 安装react-native-cli
如果安装耗时较长，可以采用淘宝镜像安装，即如图1-8所示的cnpm。1.1.3 使用NVM管理Node.js版本
因为需要经常切换Node.js版本，所以建议使用NVM（Node.js Version Manager）来管理Node.js版本。NVM在GitHub上的地址是https://github.com/cnpm/nvm（这里使用cnpm的NVM）。
首先，我们使用git命令将代码克隆下来。例如，在命令行中输入git clone命令：$ git clone https://github.com/creationix/nvm
为了临时使用nvm命令（只针对当前bash），在终端中输入如下命令：$ cd nvm（新版没有该目录）$ source nvm.sh
这样我们就可以用nvm对Node.js和io.js进行版本管理了。在终端中输入nvm命令，可以看到命令帮助：$ nvmNode Version ManagerUsage:nvm help Show this messagenvm --version Print out the latest released version of nvmnvm install [-s]
我们使用nvm命令来查看远程Node.js版本有哪些：$ nvm ls-remote
同时可以使用nvm ls命令查看当前本机已经安装的所有Node.js的版本，如图1-9所示。图1-9 查看当前本机已经安装的所有Node.js的版本1.1.4 创建项目
搭建好React Native环境后，现在来创建项目Hello。在命令行中使用react-native init命令：$ react-native init HelloThis will walk you through creating a new React Native project in /Users/lihua/work/Hello> bufferutil@1.2.1 install /Users/lihua/work/Hello/node_modules/react-native/node_modules/ws/node_modules/bufferutil> node-gyp rebuildCXX(target) Release/obj.target/bufferutil/src/bufferutil.oSOLINK_MODULE(target) Release/bufferutil.node> 这里省略了安装过程的信息To run your app on iOS:Open /Users/lihua/work/Hello/ios/Hello.xcodeproj in XcodeHit Run buttonTo run your app on Android:Have an Android emulator running, or a device connectedcd /Users/lihua/work/Helloreact-native run-android
到目前为止，我们已经创建好了项目，可以看到Open /Users/xxx/Hello/ios/Hello.xcodeproj in Xcode，这提示我们使用Xcode打开项目。
进入刚才创建的Hello项目，点击Hello.xcodeproj打开该项目。需要注意的是，xcodeproj类型的文件是Xcode的项目文件。使用快捷键cmd（⌘）+R启动项目，这时可以看到启动了一个终端React Packager和一个模拟器。如果想了解React Packager，可以翻阅到2.3节查看。
项目启动完成后，就可以看到模拟器上显示了Welcome to React Native!，这说明项目运行成功，如图1-10所示。图1-10 Hello World
我们使用Sublime Text打开index.ios.js文件，将Welcome to React Native!修改为“开始React Native编程之旅”，此时再使用cmd（⌘）+R快捷键刷新模拟器，会立即显示“开始React Native编程之旅”的字样。这说明，修改JavaScript文件起作用了。1.2 从React 到 React Native
React Native是基于React设计的，因此，了解React有助于我们开发React Native应用。1.2.1 React简介
React的GitHub地址是https://github.com/facebook/react。截至2015年7月26日下午3点，React已经获得25451个star、3733个fork，以及数百个issues和pull requests。这说明React受到了很大的重视，尤其是前端工程师。React的官方地址是：http://facebook.github.io/react/。
目前，React的最新版本是React v0.14.0，其官方的介绍是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。可以看到，React提出的是一个新的开发模式和理念，它强调的是“用户界面”。因此，很多开发者将React同Angular、Ember、Backbone等前端框架进行比较是不太合理的。
毕竟，大家思考的出发点就不一致，React希望将功能分解化，让开发变得像搭积木一样，快速且可维护。还有开发者开了个玩笑，说React抛弃了View（视图）和Controller（控制器）的分离实践，一夜回到了“解放前”。这说明，有很多开发者对React还是存在一定疑虑和思考的。接受一个新事物需要一定的时间，同样接受一个新的开发模式，并且该开发模式丢弃了一些既有的经验，需要一定的勇气和踩坑的精神。
React主要有如下3个特点。
作为UI（Just the UI）：React可以只作为视图（View）在MVC中使用。并且在已有项目中，很容易使用React开发新功能。
虚拟DOM（Virtual DOM）：这是React的一个亮点，可以很好地优化视图的渲染和刷新。当然，它也可以在Node.js服务器端和React Native中使用。虚拟DOM是React最重要的一个特性。以前，我们更新视图时，需要先清空DOM容器中的内容，然后将最新的DOM和数据追加到容器中，现在React将这一操作放进了内存。React认为内存的操作远比视图全部更新来得高效。随着浏览器的迭代，事实情况更是如此，内存相比视图刷新要廉价得多。React将视图变化放进内存进行比较（就是虚拟DOM的比较），计算出最小更新的视图，然后将该差异部分进行更新以完成整个组件的渲染。这就是React如此高效的原因。
数据流（Data Flow）：React实现了单向的数据流，并且相对于传统的数据绑定而言，React更加灵活、便捷。
现在我们对React已经有了初步的了解，那么，学习React需要掌握哪些知识呢？
JSX语法知识：JSX的官方解释是其语法类似于XML（an XML-like syntax），这也是前端工程师更容易理解JSX的原因。因为HTML是XML的子集，前端工程师对HTML更为熟悉。
ES6相关知识：因为ES6增加了很多语法特性和新功能，可以使用ES6更加快速地进行功能开发。
前端基础知识：当然，最为基础的是需要具备基本的前端知识，其中CSS以及JavaScript比较重要。
现在，我们举3个简单的例子来说明React的用法。关于IDE，可以使用WebStorm，因为WebStorm拥有比较丰富的插件。简单组件和数据传递我们可以使用this.props来做简单的数据传递，具体代码如
下：
react.js和JSXTransformer.js这两个文件，其中react.js是React的
核心文件，JSXTransformer.js是将JSX转译成JavaScript和HTML
的工具。在上面的例子中，我们使用的是JSXTransformer.js直接
引入，这样的话，就可以在运行时解析转换JSX。当然，在生产
环境中，我们可以将JSXTransformer.js所做的工作转到线下，做
个预编译。例如，可以使用Node.js做预编译，可以安装react-
tools工具：
$ npm install -g react-tools这样，代码经过了预编译、压缩和合并后，会提高网络的加
载速度，减少流量宽带的浪费，优化了用户体验。现在，我们分析上面的代码，它主要做了两件事。定义了一个组件HelloMessage。HelloMessage可以传入
name属性，同可以将内容用h1标签渲染。使用React.render方法将组件渲染到id为example的div内。
render方法有两个参数，第一个参数就是要渲染的组件内容，第
二个就是要渲染到的目标节点。此时打开浏览器，可以看到效果：Hello React!。我们打开
Chrome console工具，看到渲染后的文档内容如图1-11所示。
图1-11 React渲染DOM可以看到，React将文本使用span包裹，然后嵌入了id为
example的div。通过this.state更新视图通过改变this.state来更新视图，具体代码如下：
这里我们省略了HTML的内容，可以参考第一个例子。上面
的代码只做了一件事：更改组件的状态this.state。在浏览器中运行效果，可以发现每隔一秒，secondsElapsed
增加1。现在，我们来看看上面的代码。我们通过
React.createClass创建了一个组件。其实，这里已经涉及一个组件的生命周期了。getInitialState
是组件的初始状态，必须返回一个对象或者null对象。在
getInitialState中，我们可以准备组件需要的数据以及后期需要更
新的数据模型，也就是说getInitialState返回的对象是挂载在
this.state上的。render方法的作用是渲染视图。这里render使用
的数据是this.state，这样我们可以通过更新this.state来更新视图。
componentDidMount是组件加载完成的状态，这里我们可以改变
组件的状态（this.state）。在上面的代码中，componentDidMount设置了interval，每隔
一秒钟，secondsElapsed加1。componentWillUnmount在组件将
被卸载时调用。我们可以在componentWillUnmount里清除定时
器this.interval。简单应用示例代码如下：
var ShowEditor = React.createClass({
getInitialState: function() {
return {value: '你可以在这里输入文字'};
},
handleChange: function() {
this.setState({value: React.findDOMNode(this.refs.textarea).value})
;
},
render: function() {
return (
输入
);
}
});
React.render(
));上面的代码在浏览器中的运行效果如图1-12所示。
图1-12 React演示效果现在我们来分析下上面的代码。ShowEditor做了一件事：用
户在textarea输入文字的同时，会在div中及时输出textarea中的
文字。这里有4个地方需要我们关注下。可以通过state来修改视图的状态从而改变视图。textarea上绑定了onChange的事件监听，其目的是通过
setState改变this.state.value。textarea添加了ref属性，这样我们就可以通过
this.refs.textarea引用textarea对象了。React提供findDOMNode的方法，通过它可以找到React的
DOM。
通过上面这3个简单的例子，我们对React有了初步的认识。1.2.2 React Native简介
前面我们介绍了React的一些特性，展示了几个简单的例子。其实React与React Native具有非常密切的关系，现在就来介绍下React在Native上的应用——React Native。React Native在GitHub上地址是：https://github.com/facebook/react-native。
截至2015年11月24日下午1点，React Native已经获得了22839个star和3644个fork，这说明React Native十分受大家关注。目前（2015年11月），React Native的最新版本是v0.15.0，我们可以到https://github.com/facebook/react-native/releases关注最新版本的发布情况。
React Native的官网地址是https://facebook.github.io/react-native/，其官网的介绍是使用React构建Native应用的框架（A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT）。
这说明，React Native采用的语法也是React。React Native的目标是高效跨平台地开发Native应用，同时，也强调了“一次学习，多个平台编写代码”。也就是说，React Native不是“一次编码，多处运行”。如图1-13所示，我们可以清楚地看到React Native是构建在React和JSX基础上的。因此，只要基本掌握了React和JSX，同时补充相关平台（iOS、Android、Web）的知识，就能开发Native应用和Web应用。图1-13 React Native设计思路
现在，我们来看一个简单的例子。在1.1.2节中，我们已经知道如何创建一个项目，这里创建一个名为demo的React Native项目。$ react-native init demo
然后使用Xcode打开该项目，按照如下代码修改index.ios.js文件：'use strict';var React = require('react-native');var {AppRegistry,StyleSheet,Text,View,Image,} = React;var demo = React.createClass({render: function() {return (
接着在Xcode中启动项目（快捷键：cmd（⌘）+R），运行效果如图1-14所示。图1-14 React Native演示效果
下面我们来分析上面的代码。使用require引入react-native模块，然后定义了AppRegistry、StyleSheet、Text、View和Image这5个对象。这5个对象其实是React Native的3个组件（Text、View和Image）和2个API（AppRegistry和StyleSheet）。如果想了解更多的组件和API，可以翻阅到第3章和第4章。
其实，上面的var形式的对象也可以这样定义：//var {// AppRegistry,// StyleSheet,// Text,// View,// Image,//} = React;var AppRegistry = React.AppRegistry;var StyleSheet = React.StyleSheet;var Text = React.Text;var View = React.View;var Image = React.Image;
可以看出，使用var {} = React的形式更为简洁。
然后使用React.createClass创建了一个组件，其中render是视图渲染的方法，渲染的内容是一行文本“欢迎来到React Native的世界”和一个图片（React Native Logo）。StyleSheet.create创建的是一个样式表的类，里面包含container和welcome这两个样式对象。同时，我们也看到组件上的style属性包含了一个对象，即style={对象}的形式。这里需要说明的是，样式书写与CSS不一样，我们需要使用驼峰命名规则。关于React Native的样式、布局及语法，我们将在第2章中详细介绍。
图1-15展示了React Native的开发流程。首先，我们需要根据业务来划分组件。这时候，组件的颗粒度需要根据业务分工和开发难度来划分，否则，后期的维护成本就会相对较高。我们希望，根据不同的功能开发不同的入口组件，这样的话，每一个功能或者功能集合就能独立出来，功能的移植性好。关于组件的功能开发，我们将在第3章和第6章中详细介绍，第8章和第9章都会以实战的形式展示。最后，为了更新和发布应用，我们需要设计和开发一套符合业务需求的打包更新机制。关于打包和热更新，我们将在第7章中介绍。图1-15 React Native开发流程1.3 为什么要使用React Native
首先，我们来回答为什么会出现React Native？这是因为移动设备的环境要比Web环境复杂得多，也就导致了Native开发的成本要高。随着前端的发展，已经拥有了大量的前端从业人员，但是移动端开发人员相对较少。一些公司为了寻求App开发效率、成本、体验之间的平衡，从而选择了Hybird App的开发方案。这样做的一个好处就是，既能拥有高效的开发效率和较多的开发人员，又能快速更新App。但是，这只是一种平衡方案。更多的时候，在资源较为丰富的情况下，更倾向于把体验做好。然而，在WebView中嵌入HTML页面存在一些性能和体验上的弱势。这也为技术发展提出了一个新的挑战：如何将开发成本和用户体验做到更好的平衡？
因此，Facebook提出了React Native的解决方案。也正是因为React Native的跨平台解决的特性和使用JavaScript作为开发语言而赢得了众多开发者的关注。很多时候，前端都有一种乐观的想法：HTML5可以替代原生应用。但是，实际上，HTML5应用在用户体验和性能上比原生应用弱一些。这就是React Native的切入点。React Native不仅可以使用前端开发的模式来开发应用，还能调用原生应用的UI组件和API。所以说，React Native兼顾了开发效率，提高了用户体验。这也为前端开发者进入原生开发领域降低了门槛。1.4 如何学习React Native
目前，React Native更新的速度较快，文档方面还不是很全。如果开发一款小型的App，掌握React Native的组件和API 就已经足够了。如果学习和实践中遇到问题，可以到 React Native GitHub issues上搜索，其中有很多解决方法。下面是关于React Native的4个比较重要的地址。
React Native官方网站： http://facebook.github.io/react-native/。
React Native版本发布： https://github.com/facebook/react-native/releases。
React Native GitHub地址：https://github.com/facebook/react-native。
疑难问题搜索： https://github.com/facebook/react-native/issues。1.5 说明
因为React Native Android版本还不稳定，本书所有实例都是基于iOS开发的。Android环境搭建可以参考：http://facebook.github.io/react-native/docs/android-setup.html。此外，因为React Native是跨平台的，在iOS和Android平台上只是一些组件和API存在差异，所以学习了React Native iOS开发后，开发React Native Android也是比较容易的事。但是，需要我们针对iOS和Android平台学习一些基础知识。
试读结束[说明：试读内容隐藏了图片]