Native展现界面是通过特定于平台的原生控件,而React则是用DOM元素。

React是用于开发前端用户界面的一套JavaScript框架,起初是由Facebook开发,随后实现了开源。React使用声明式的语法和JSX(他们的JavaScript语法扩展)来描述HTML布局。每个React组件由属性(property)和状态(state)来配置,当状态发生变化时,会触发由单向数据流驱动的UI更新。这些更新通过虚拟DOM机制进行优化,确保了实际的DOM更新只包括真正产生了状态变化的部分。

一个典型的React组件如下所示:

上面的例子中定义了一个名为HelloMessage的React自定义组件。正如React的标准做法一样,该组织中定义了render方法返回一个HTML元素的树结构,以生成DOM。这种以HTML语法风格来定义元素是由JSX支持的,这些语句会被预处理并翻译成React函数调用来实际产生相关HTML元素。

类似的,React Native使用相同的声明式语法来定义原生UI,只不过不是绑定到HTML元素,而是通过自定义类型实现对原生UI组件的映射。下面是来自ChecklistApp的示例代码,展现了React Native如何绑定到原生UI组件,比如View和可编辑文本框:

1. 手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。
2. 原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。
3. 样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

• JS引擎运行于后台线程
• React插件遵循这种通讯协议
• 通过工具使得跨平台开发更容易一些(比如标准文本组件,跨平台的flexbox布局系统)
• 设计目标就是充分利用原生平台的UI组件,并不是成为下一个Java Swing

Facebook并没有宣布React Native何时面向公众发布,目前仍然处于公司内部开发状态。不过整个库的功能已经可用,并且已经用在Facebook的一些已发布应用中,比如Facebook Groups iOS App。

感谢邵思华对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

众所周知，有人说.net可以用Xamrian，呵呵，不习惯收费的好么？搞.Net的人设置一次java的环境变量，可能都觉得实在太麻烦了，可能是因为这些年微软确实把我们给带坏了，所有东西一键安装，简单设置，打开项目直接运行就行了，而要想成功部署android开发环境，那可能需要自己填N个坑，最近FB出的React-Native比较火，哥们在不忍转学java的情况下，，虽然java不是anroid，但兄弟我还是决定用React-Native来实现自己的android梦，于是开始了数日的填坑运动，当然兄弟们不要像我学习，我是一边工作，一边填坑的，有一下没一下的，但是最后还是顺利部署上了。

首先，我得说，我开始填坑也是站在巨人的肩膀上的，所以以下几位的文档我是经过仔细阅读的，虽然到后来填坑时，很多细节都忘了，但是还得回来再看过啊，大家在看的随笔时，如果发现有的东西只是说了下，那很有可能他们几位说的已经比较详细了，我当然不表述了。所以结合起来看最好。

还有一个qq群帮助我比较大，其中有高手愿意指点新人，同时有好多新人愿意相互交流，为免大家说我做广告，可以私信索取

你如果看了上边几个链接的文档相信知道了一个基本步骤：

我列的这几个步骤可能与上边参考的几位阿牛的有区别，其实有些环节可以暂时不操作，对于我们新手来说，第一眼想看到的不就是程序正常跑起来么。

这个大家都知道怎么下载，但也有少数人不知道，我啰嗦下：

有 8u65或8u66，我下的后者，这个我到觉得无所谓，自己根据喜好下吧。下来之后就是安装了，在windows下安装应该没有问题，安装完之后要配置环境变量，这是JDK的第一大特性（个人观点），咋就不能安装时程序设置呢，非得手动配？你看看人家Node，自己安装完也就设好了。

按上图的步骤，此电脑上右击，然后按后边的步骤就可以了，在环境变量中添加JAVA_HOME的变量与值，并将其添加到Path中，我用的是win10，其它windows操作系统类似，mac自行绕开，这个大家如果不清楚细节，直接百度就行了。如果设置成功，你在cmd中输入java，那肯定会正确的响应，所以设置完后检查下看这步有没有问题，否则等到了后边之后，你会发现坑根本不知道是在哪挖下的，那你怎么填？

这个是我遇到比较大的一个坑，主要还因为墙的原因，不好操作，所以坑也就大点，其实这块的问题，在上面几个大牛的帖子中是说过的，以下复制下来，大家领会下：

为了加速下载，推荐从下载。

推荐使用腾讯Bugly的镜像加速下载。

我总结下我的经验，我是先安装的SDK manager，然后让其安装SDK的，如下图：

然后这货就会经常给你显示个Failed了，或者长时间进度条保持不变，速度很慢，时间很长，我起初就让他自己下去呗，我用的是虚拟机，反正不影响我正常工作，它爱什么时候下完什么下完，所以经常下班了，它还在下，干脆不关机，你下你的，后来有几个没装上也不在乎了，（此处有坑），打开SDK manager后你就会看到哪些装了哪些没装，显示installed的即是装了，哪几个 要装建议参照上边的说明。我用这个装的时候buildtool的23.0.1死活装不上，最后所以老出错，下边有说。

这个建议大家设置，否则后边会出错，我当时是没有设的，因为有一个帖子中说最好设上，也就是可以不设，结果自己给自己挖了个坑。安装完之后如果正常，你在命令行输入android，就能直接打开SDK manager,这也算是验证你的android环境搭建好了没。

这个是最没有坑的一个，下载其它东西的时候捎带下载了node.js，然后安装了下，而且这货自己设置环境变量，省去我们不少事，此处给node点个赞，程序在安装时我记得有选项，选上就可以了，你装完之后，在环境变量中就能看到下面的东西了。

如果前边正常的话，这块应该是比较容易的，照着教程输入下边的命令：

如果你出现上边的效果，说明它在工作，这应该是正常的。至于以上大牛们帖子中说的bug，我是没有遇到的，说明在新版本中已经修复这个问题了。

这个命令前边两具是命令后边这个reactNative是目录名，你自己命名就行，我一开始以为必须是这个名字，郁闷了好半天，后来才发现这就是名字。

接下来输入下边的命令：

我当时是出错了的，如下图：

提示是缺少Build Tools 23.0.1，这就是前边采用SDK manager时挖下的坑，所以建议大家前边有问题时解决了再往后走，我是如何解决的呢，我火冒三丈的时候，下载了Android Studio，记得大牛们说，推荐下载这个，可是我没有听，用SDK manager在那里狠费劲，最后还得装上。这里需要提醒下各位，下载这个的目的是补全前边缺少的Build Tools，大家如果也采用了两种方式来安装的话，一定要注意将下载下来的SDK放在同一个目录中，也就是要与环境变量设置中的位置一致，默认的应该是如下图类似的位置，和SDK manager设置的路径不同，所以如果你采用两种方式补全的话，你就把这个目录下的复制到同一个目录中，我是复制这里到SDK manager的，原因是我前边都设置了环境变量了啊。

所以如果是第一次安装的兄弟姐妹们，就不要采用SDK manager了，速度比较慢，当然这是个人观点，您仅供参考啊！

上边的问题解决后，就可以运行packager了

上边就是正常运行后的状态，一开始我等着结束呢，后来它就一直保持这个状态，我以为卡住了，其实它是正在运行，这里吐槽下，你就不能给个正在运行的提示啊，害的我担心好半天，随后我们需要安装模拟器或连真机。

 说明下，如果用真机，android 5.0以下的话要和电脑网络相通，注意是网络，不是插了USB线就行了，我在此处转过好几圈，最后还是群里的高手说的，我才明白了。不过我说明下，我是在虚拟机中装的环境，所以用模拟器调试的，否则手机如何与虚拟机网络相通还是个问题，谁要是解决了告诉我一声，不过无论是模拟器还是真机，都是要装驱动的，我为了图省事，我直接装了豌豆夹，让这货帮忙装了下驱动，呵呵，此处应该有掌声，你们要是嫌装驱动麻烦，你们也可以这样做。

模拟器大家就下载大牛们推荐的BlueStacks，挺好用的。你连接好虚拟机或者真机也好，在cmd中输入adb devices就可以查看了。如果有东西说明连接正常，没有你就再检查检查看是不是没连接上。

设备连接正常之后，就可以运行我们的程序了，注意不要关掉上边说的packeger窗口，用另一个CMD运行下边的命令：

这里本来是我们最应该激动的时候，但是往往这个时候都是要出错的，我的也不例外，显示了一个红色窗口，如下图：

 不要惊慌，不要紧张，最起码我们都看到界面了啊，下面的设置本来是可以参考第一篇老大的文章的，那就是设置IP与端口，只是老大没有贴图，同时也说是局域网地址，我一直以为是和搭建环境的电脑处于同一个网段就行，其实是要设置成电脑的IP，并加上端口，如下图，然后确定再返回就行了，然后再重新rload js就应该正常了。设置的菜单真机点菜单按键即可，模拟器的点下图所示的位置就能出来，然后选那个dev settings.

设置完之后确定返回再重新加载，激动人心的时刻才真正到来了：

程序员都有一颗强大的心是有道理的，光这个东西我调试了好几天，都没有打败我，最后我还是让它出来了，所以为所有的搞开发的程序员们鼓掌。

当然，由于历时几天，同时内容实在比较多，又得调试bug，还得截图给大家准备写心得，所以有的地方写的很乱，同时也有不全面的地方，大家如果有疑问，留言或qq都可以。咱们接着聊。声明一下，截图有的是网上的，有的是群里直接拿过来了，只是为了符合场景，如果大家觉得我盗了你的图，提出来，我再想办法截我的图，毕竟有的错误还原一回也不容易了