2015年9月15日，Facebook发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。
什么是React Native
React Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web，iOS 和 Android 平台的原生应用。React Native 的宗旨是，学习一次，高效编写跨平台原生应用。
官方的github地址为：https://facebook.github.io/react-native/
React Native有什么优点
1.提供了原生的控件支持
使用 React Native 你可以使用原生的控件，入在iOS平台我们可以使用UITabBar控件，在Android平台我们可以使用Drawer控件。这样，就让我们的App从使用上和视觉上拥有像原生App一样的体验。而且使用起来也非常简单。
2.异步执行
所有的JavaScript逻辑与原生的代码逻辑都是在异步中执行的。原生的代码逻辑当然也可以添加自己的额外的线程。
这个特性意味着，我们可以将图片解码过程的线程从主线程中抽离出来，在后台线程将其保存在磁盘中，在不影响UI的情况下计算调整布局等等。
所以，这些让React Native开发出来的App都是较为的流畅。
这个之间的通信过程也是有序列化来完成的，这个就让我们可以使用Chrome Developer Tools 来完成JavaScript逻辑的调试，当然我们也能够在模拟器和物理设备上调试。
3.触屏处理
React Native实现了高性能的图层点击与接触处理。
4.Flexbox的布局样式
使布局将变得更简单，这就使我们为什么要将网页的布局模式切换到React Native的Flexbox布局模式。Flexbox让UI布局变得简单，入使用margin和padding的嵌套模式。当然，React Native 同样也支持网页原生的一些属性布局模式，如FontWeight之类的。这些声明的布局和样式，都会存在内联的机制将其优化。
5.Polyfills机制
React Native也支持我们使用第三方的JavaScript库，来方便我们的开发。支持npm中的成千上万的模块。
6.基于React JS
拥有React JS的优良特性。
跨平台框架这么多？为什么重点关注React Native？
如我们之前所介绍的，Android与IOS跨平台开发框架如此这多，如之前我们介绍的PhoneGap、Xamarin等，为什么我们重点的关注React Native呢？
Facebook所开源的框架
我们知道，所有的开源框架，只有是一线的大公司研发出来的才能够保证框架的维护性、可用性。当然，这样也会吸引更多的开发者使用这个框架，才能够使我们在人才储备上有人可用。并不是说，框架多好就能够用的。如国内的CrossApp，虽然很好用，但是知名度不够，造成我们研发、bug反馈、人才招聘上的种种窘境。
React JS技术的革命
这个东西也就是国内的很多跨平台框架没有关注的地方，Facebook使用了React JS已经有了好几年的技术变革，特别是JSX与Virtual DOM的加入，给使用JavaScript来开发Native App简直是一个质的飞跃。
BAT团队已经投入研发与使用
如果很多中小型公司，看不清方向，这个我们倒是可以模仿BAT的脚步。现在的BAT公司内部，特别是A，已经投入了大量的人力在React Native上面，听说TMall App已经开始使用React 进行重构。
我们可以看到，目前对于Facebook来说，他们的新业务线也将直接使用了React Native的开发模式
搭建React Native 的 Windows 环境
NodeJs、Python、Android SDK、JDK
由于我们大天朝网络的限制，很多依赖的库都fetch不下来。所以整个React Native的环境搭建，命令执行都是一个痛苦的过程。（就连NodeJS我都快下了半天的时间）
我在Windows平台上搭建环境弄了差不多一周的时间，都没有弄下来，特别是下面这个问题一直困扰着我
<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">bash: ulimit: <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">open</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">files</span>: cannot modify limit: Too many <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">open</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">files</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
后面得到了高人的指点，借给我了一个梯子，并在我的Mac设备上成功的运行了自己的第一个React Native项目。哭～～～
下面是我的运行步骤，大多数是和官方的介绍一样的：
我们先从Github上获取React Native的代码
github地址：https://github.com/facebook/react-native
<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">git <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">clone</span> https:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//github.com/facebook/react-native.git</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
进入React Native 并使用npm 进行安装
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">npm install <span class="hljs-attribute" style="box-sizing: border-box;">-g</span> react<span class="hljs-attribute" style="box-sizing: border-box;">-native</span><span class="hljs-attribute" style="box-sizing: border-box;">-cli</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
注意
- 使用npm进行安装，需要搭建好完整的nodejs环境，nodejs地址：https://nodejs.org
- npm install 需要依赖于很多国外资源，自备翻墙梯子
新建自己的React Native项目，这里命名为AwsomeProject
<code class="hljs java has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">react-<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">native</span> init AwsomeProject</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
运行完后，如果环境变量没有配置错误，react 将会帮我们生成一个AwsomeProject的文件夹目录。
里面内如如下所示：
运行Android App
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>cd <span class="hljs-constant" style="box-sizing: border-box;">AwesomeProject</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>react-native run-android</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
看起来很简单的两句命令，但是里面隐藏这很多的陷阱。
- 确保Gradle的环境配置好了，这里还会动态的down很多Gradle的依赖文件，不翻墙估计依赖文件都下不下来
- 需要安装好自己的Python环境（怎么安装google吧），React Native 的 packager需要 python的支持
- 这个东西，只能运行在Android模拟器上，真机运行必须失败，至于为什么后面在介绍
注意好上面三点，就能在模拟器上看到如下画面了
运行iOS App
ios相对就简单了很多，直接打开 ios/AwesomeProject.xcodeproj 文件，使用Xcode编译运行就能出现和Android类似的界面了。我的效果如下：
注意，同样只能够在模拟器上运行
React Native的优势和劣势：（转）：
React Native的优势：
相对Hybird app或者Webapp：
- 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
- 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
- 可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
相对于Native app：
- 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了…
劣势：
- 扩展性仍然远远不如web，也远远不如直接写Native code（这个不用废话解释了吧）
- 从Native到Web，要做很多概念转换，势必造成双方都要妥协。最终web要用一套CSS的阉割版，Native要费劲地把这个阉割版转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），两边都会不爽。
原文地址：http://blog.csdn.net/yzzst/article/details/48002187
【关于我们】
每天名企社招内推（微信公众号：ourpush），专注于国内各大互联网公司社会招聘内推。每天更新最新互联网名企（包括但不限于BAT网易小米京东乐视携程等名企）内推信息，有技术岗、有产品岗、有运营岗、有设计岗、有交互岗、有销售岗，更有其他N多相关岗位！更多内推信息请扫描以下二维码关注查阅。
0 0
