点击上面蓝字江清清或者搜索公众号codedev123关于我！(一)前言
FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟，但是也没有阻挡了广大开发者的热情。可以这样讲在2015年移动平台市场上有两个方向技术研究比较火，第一种为阿里，百度，腾讯，携程，360等一线互联网公司的插件化，热修改等技术，第二种就是广大开发者一直在讨论的React Native技术。前几天同我在美国的童鞋了解到，在国外现在很多创业型互联网公司都在使用React Native技术，由此可以看出该项技术的前景还是不错的。我在这边我自己就大胆预测一下吧(呵呵,勿喷哦~)：2016年将是React Native大力发展的一年。所以对于我自己来而言，2016年的主要技术方向,ReactNative是占了主角了。在接下来的很长一段时间内，我的博客会持续更新React Native的应用开发教程，欢迎大家关注以及相关交流！
刚创建的React Native技术交流群(),欢迎各位大牛,React Native技术爱好者加入交流!(二)React Native介绍
React Native
For Android是伟大的互联网公司Facebook与2015年9月15日发布的，该可以让我们广大开发者使用JavaScript和React开发我们的应用，该提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用，甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验，所以这边fackbook更加强调的是learn once,write everywhere，应用前端我们使用js和React来开发不同平台的UI，下层核心模块编写复用的业务逻辑代码，提供应用开发效率。
React Native项目github地址:/facebook/react-native
React Native项目官网文档:http://facebook.github.io/react-native/docs/getting-started.html(三)React Native配置安装
特别声明:facebook官网说当前react native欢迎是需要OS X,不过我也看到了有人通过windows系统配置该环境哈~大家有兴趣可以百度搜索一下。
3.1.Homebrew安装
Homebrew是OS X不可获取的套件管理器，我们可以通过它获取并且安装很多组件,安装方式如下:ruby -e &$(curl -fsSL /Homebrew/install/master/install)&
然后通过命令行执行brew -v进行检查brew是否已经安装成功。整体截图如下: 3.2.Node.js安装,我们需要安装Node.js4.0或者更高版本,这边推荐采用Node管理器nvm来进行安装,nvm项目地址:/creationix/nvm
第一部分:安装nvm，查看项目官网官方推送curl或者wget方式安装或者更新nvm:
第一种:curl方式:curl -o- /creationix/nvm/v0.30.1/install.sh | bash
第二种:wget方式:wget -qO- /creationix/nvm/v0.30.1/install.sh | bash
不过在使用这两种方式之前，我们可以采用brew install curl或者brew install wget来确保已经安装curl或者wget。我这边采用了第一种方式安装，具体安装截图如下:这样我们已经安装了nvm，但是最好我们配置一下环境变量到.bash_profile文件中，具体配置如下:最终我们通过命令行执行nvm
--version检查一下nvm是否已经安装成功。
第二部分:安装Node.js，根据官网文档我们直接命令行执行如下命令即可完成完成:nvm install node && nvm alias default node
安装截图如下:该会进行安装Node.js最新版本，并且会给我们打个别名，方便使用。通过nvm我们可以安装多个版本的Node.js，并且可以非常轻松的选择不同的版本进行切换使用。
【注意】如果现在采用是Node5.0版本的版本，官网是推荐安装npm 2，该版本比npm 3速度更加快。在安装完Node之后，命令行运行npm install
-g npm@2安装即可。 第三部分:安装watchmam，该用于监控bug文件，并且可以触发指定的操作，安装方式如下:brew install watchman
安装截图如下:
第四部分:安装flow,flow是一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误，官网:http://www.flowtype.org/
具体命令为:brew install flow安装截图如下:
3.3.原生开发环境安装:
针对iOS开发，我们只需要安装Xcode7.0或者7.0以后版本，该可以通过AppStore进行下载安装
针对Android开发，Android环境配置网上非常多了，我相应看这篇文章的朋友电脑上面基本都有Android开发环境的了~针对安装详细(点击进入参考文章)
3.4.React Native安装
现在就是最后一步，也是最激动人心的时刻到了，我们使用命令行运行如下命令安装React Native:npm install -greact-native-cli
安装截图如下:
经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作，下面我们来进行一个实例演示React Native项目的效果。(四)React Native第一个应用(AwesomeProject)
经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作，下面我们来进行一个实例演示React Native项目的效果。ReactNative第一个AwesomeProject，就不是HelloWorld啦。
首先执行如下命令,生成一个工程:react-native init AwesomeProject
运行截图如下:目录结构如下:
我们仔细看上面的目录，会发现该该生成android和ios两个平台的原生项目，大家有兴趣可以打开android和ios目录看一下，里边就是一个Android
Studio和Xcode创建的项目。其中index.android.js和index.ios.js文件为Android和IOS的空壳应用文件。另外还有一个node_modules文件夹，该为Node.js存放和管理npm包得，也包含React Native框架文件。查看项目部分代码:index.android.js如下:
4.1.运行iOS 应用:
①.命令行执行cd AwesomeProject,路径切换到项目主目录
②.点击ios/AwesomeProkect.xcodeproj进行运行Xocde
③.使用编辑器进行打开index.ios.js进行相关修改，然后运行应用即可。
4.2.运行Android应用:
①.命令行执行cd AwesomeProject,路径切换到项目主目录
②.命令行执行react-native run-android进行加载运行android 应用。
③.同样可以使用编辑器进行打开和修改index.android.js文件，接着通过菜单按钮选择ReloadJS来进行刷新修改
运行截图如下:这些步骤，命令执行完之后，那么我们第一个应用也完美运行啦，具体看如下效果！(五)已存在React Native项目添加Android版本
因为React Native的Android版本的发布要晚于iOS版本，所以有很多接触React Native比较早的应用可能只有iOS版本，我们可以进行如下的操作，给添加Android版本:
①.修改package.json文件来更新react-native到最新版本
②.运行npm install命令
③.最后执行以下react-native android命令即可(六)最后总结
今天我们从初始开始，安装各种工具以及命令，完成了React Native的基础环境的搭建，并且成功运行第一个React Native for Android的应用。下一篇我们对推荐IDE(Atom)以及相关插件的安装配置讲解。敬请期待~Sky丶清(codedev123)专注于移动开发(Android、IOS)以及项目管理。长按下面二维码或者搜索公共号 codedev123 关注我点击阅读原文查看原网页江清清(codedev123)　
　文章为作者独立观点，不代表大不六文章网立场
codedev123技术fanr,定期分享移动开发技术(Android/IOS),Web前端,项目管理以及精品资讯文章。热门文章最新文章codedev123技术fanr,定期分享移动开发技术(Android/IOS),Web前端,项目管理以及精品资讯文章。&&&&违法和不良信息举报电话：183-
举报邮箱：
Copyright(C)2016 大不六文章网
京公网安备78从Samurai-Native框架开发谈React Native
发表于 16:16|
作者郭虹宇
摘要：F8大会的主题折射出一个非常重要的观点，未来Web前端开发与Native移动应用开发工程师的工作职责很可能会相互重叠，平台之间的边界不会太明显，还会产生更专注于跨平台App UI及交互构建的“全终端开发工程师”。
近一年移动开发领域最火的话题就是“Web与Native正在融合”，React Native的出现是推动融合的一个关键点。正如F8大会的主题“Bring modern web tech to mobile”，巨头们已经着手从上自下展开技术融合，Web App开发者们与Native App开发者们长年相互鄙视斗争的过程将要告一段落。Web App开发者们实在是受够了HTML5应用的诸多基础体验问题，如：加载时间长，用户体验差，动画效果弱等。Native App开发者则是对于变化的需求以及App Store审核时间无法平衡。因此，从React Native发布起，如一阵夏日凉风唤醒了沉睡的开发者，使得这类技术近期备受关注。React Native实现解决的是前端开发者可以使用相同的技术体系来解决跨平台应用开发的问题，并以创建HTML及CSS子集通过WebCore技术与原生结合构建出与体验上几乎无差别的App。一来HTML5原有痛点被消除，二来前端技术栈被保留，难道前端开发工程师的春天真的来了？Web与Native交叠：未来的全终端开发工程师F8大会的主题折射出一个非常重要的观点，未来可能Web前端开发工程师与Native移动应用开发工程师的工作职责会相互重叠，所持技能及开发环境会趋向于统一，平台之间的边界不会太明显，未来的几年可能会产生一种新的职位叫做“全终端开发工程师”，属于“全栈”系列的前半部分，他们会更专注于跨平台App的UI及交互构建，使多平台体验一致，从iOS App、Android App到HTML5 App的UI开发。就此方向，React Native才给出了一个大一统的口号：“Learn once，write everywhere”。为什么？想想就知道了。React Native其实并不算是新技术，以往BeeFramework（XML+CSS）、NativeScript（JS+CSS）等都有类似的实现，但它们只专注于Native平台并使用了一些非标准或不为前端开发者而熟知的技术。React Native思维最大的不同在于，基于ReactJS的知识体系，只要学过一次就可以写遍全平台，那么我们可以认为iOS只是一个开始（Facebook野心是巨大的）。React Native因何而来？React Native能够被设计并实现，我个人以为是得益于作者对于浏览器技术和Virtual DOM技术的深度技术思维及扩展，因为在基于此项技术的基本模型及模式建立好的情况下，架接于任何一个平台来实现将不再是难事。我们能够看到React Native中有类似于WebKit的影子，比如Shadow View和CSS Node。在内存中，这两种基本元素构建出能够表达UI结构的一种通用模型，那么在任何一个平台上只要遵循这个规则，都将可以描述出一个UI是“长什么样子”，有些类似于浏览器中的DOM Tree + Style Tree。基于此，React Native通过ReactJS又实现了一套平台无关的触控处理及数据绑定，这样将原来平台相关的代码抽离到了平台无关的JavaScript语言来实现，大大降低了React Native开发者对平台特性及语言的依赖。回顾浏览器的发展历史，从20年前Netscape发布了Navigator到如今的Chrome及Safari，浏览器内核的本质没有什么变化，输入进入的是UIML（如HTML），其核心WebCore帮你加载、解析、构建、计算出页面中每个元素结点上下级关系、位置、及样式。不幸的是，W3C对于HTML5标准的确立与推进也过于缓慢，而且标准与需求明显严重脱节，颇有些鸡肋之感。W3C几乎错失了在移动端的布局机会，甚至我们不清楚这帮大佬是不是真的有考虑Web技术在移动端发展的未来，让人不禁想问，为什么React Native这类技术不是由Google和Apple两大WebKit拥护者及手机操作系统开发商发起并实现的？未来又将如何？所以，此时必然会出现其他一些不甘寂寞的巨头浮出水面，给出答案。那就是，尝试重造足够好的轻量级WebCore，用于满足同时具有原生性能及体验，并也具有Web开发效率的全新技术。关于这一点，我觉得React Native偏离得有些远，Facebook最初更多的只是为了解决自己内部的需求，现在是想借ReactJS吸引更多的开发者来重造一个“通天塔”。自然，时间长了会出现两种结果，一种是Web与Native融合，另一种则是Web与Native分裂。而分裂的结果是，Facebook强行撕裂一些W3C身上对自己有利的肉，翻炒之后做成React这道菜。对于企业来说，全面换用React Native的时机还不够成熟，至少在Android版本推出后再看。笔者本人也看过React Native iOS的实现代码还有待改善。取精华去糟粕，Samurai-Native框架与React Native有哪些不同？最后，再说说我所开发的Native App框架Samurai-Native。与React-Native相反，Samurai-Native的理念是使Native开发者可以使用标准Web技术（HTML+CSS）解决跨平台UI开发的问题，已在Github上。Samurai-Native架构图Samurai-Native与React Native相比有着诸多不同，后者在Native部分拥有着很多已经让人无力吐槽的实现：&Text&不是UILabel或类似控件，而是drawRect，这样的问题是accessibility很差，无法选择复制粘帖，也无法实现富文本效果。&Text&不能嵌套，不能够使用Web开发者思维来构建文本段。&List&不是UITableView或UICollectionView，而是通过UIScrollView实现的简单列表，无法满足后续复杂需求。不能使用GestureRecognizer，而是由JS简单判断点击区域来实现手势识别。不能使用ResponderChain，事件机制只能使用ReactJS提供的方式。JSX：让人无法想像的历史倒退，W3C通过20年将 “布局、样式、数据” 三者分享，Facebook只花了几个月就能合并到一起了。CSS-layout，只支持Flex-Box，不支持Fluid（流式）布局。CSS不支持继承和叠加，不支持多Class。HTML标准标签均无法使用。Native API需要手动导出，当iOS系统升级时，可能会带来兼容性问题。控件必须继承自RCTView，并需要定义RCTViewManager，难以将现有控件为React-Native所用。全局hook了触屏事件，由root view转发给touch handler，再用60fps的timer刷新给ReactJS来处理，无法想像的实现方式……无法使用onclick，必须包裹一层&TouchableHighlight&，使布局结构变得极为复杂。需要使用Chrome调试App，而无法使用原生IDE，调试过程变得极为复杂。Samurai-Native的UI HTML示例代码因此，在开发Samurai-Native的过程中，笔者专门针对这些问题进行了改善，取React Native精华，让它们成为Samurai-Native中的优势：支持标准HTML；支持标准CSS；支持UITableView；支持UICollectionView；使用原生GestureRecognizer；使用原生ResponderChain；UI layout、style、data完全分离；支持Fluid布局；支持样式继承和叠加，支持多Class；支持部分标准HTML标签（有做取舍）；支持原生控件直接导入，只需要通过&YourView/& 标签命名即可；支持onclick、onpan、onswipe多种手势；使用Xcode调试。为什么选择HTML+CSS的组合，而不再使用类似于React-Native或BeeFramework的XML？主要原因是不想再造轮子。HTML经过20年的时间检验，已经足够成熟，是最好的复杂UI布局的描述语言。Samurai-Native工作流程图那么总结起来，Samurai-Native的终极目标是想做成一个标准的Web浏览器内核，来为开发者们提供一款W3C标准WebCore的跨平台UI解决方案，既能渲染Web页面，又能生成原生View树。通过私有浏览器内核技术（Objective-C编写）将HTML+CSS解析渲染成为Native View树，从而既有Web开发体验，又有不错的用户体验。（责编/唐小引）作者简介：郭虹宇（），有着近十年的移动App开发及架构经验。曾在腾讯无线部门做研发Leader，目前经营开源工作室Geek-Zoo Studio。CSDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面，如果您有想分享的技术、观点，可通过电子邮件（tangxy#csdn.net，请把#改成@）投稿。第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章使用 React Native 一年后的感受
当我在面试的时候，技术主管Stanislav跟我说：代表着未来。等它一发布，我们就会用它从零构建iOS应用。作为一名原生iOS开发者，基于先前使用PhoneGap的经验，我非常怀疑使用Web技术构建移动应用的这种方式。但是当我学习并使用React Native一段时间之后，我非常庆幸我们做了这个决定。开发效率虽然iOS“团队”只有我自己一个人，但是iOS应用开发依然可以赶上Web和桌面应用开发闪电般的速度。Apple公司已经允许开发者使用JavaScriptCore进行应用的升级，而无需等待App Store的审核流程。这对于那些缺乏专业的iOS QA（质量保障）团队的小公司来说是非常便利的，因为iOS团队可以在发布新功能之后进行热更新。使用React Native一年之后，我们的iOS开发周期明显变快了，这得益于很高的开发效率。比如：基于现有的前端架构，我们在两周之内就发布了V1.0的版本。相比于Auto Layout，基于的样式可以节省一半的代码，并且更容易理解。使用Flux设计模式，iOS和Web应用共享了store和action的98%的代码。性能React Native在后台线程运行JavaScript并发送极小的代码到主线程中。事实证明，React Native相比于Objective-C或Swift编写的原生iOS应用来说有一些性能差异！Reactiflux小组的性能演示，该组有超过1.1万个会员 —— UI和JS线程大多数都是60FPS然而，我们当初开始构建iOS应用时发现聊天滚动视图的性能并不令人满意，尤其是一些活跃的聊天分组。于是，我们决定使用构建聊天视图并编写必要的桥接代码代替原有的方案。当JS线程在完成一些繁重任务的时候，类库也无法提供原生那样流畅的动画（译注：之前动画是在JS线程执行，，有望使用原生iOS动画接口），因此我们在抽屉侧滑动画上继续使用。注： 作者称该应用仅聊天视图和抽屉动画是原生代码实现的，其他均由React Native实现。当React Native Android版本发布时，我们也尝试在Android设备上运行应用，但遗憾的是，我们遇到了一些性能问题，只好暂时放弃。Android开发主管Miguel是这样说的：很遗憾，不同Android设备的性能差异很大，这点明显落后于iOS。我们可以让应用运行地很快，但是性能——尤其是触摸事件，即使在更高端设备上也不能令人满意。并且在早期，由于React Native Android缺乏完善的功能，我们从产品原型过渡到成品应用比iOS花费了更多时间。可用性React Native让开发工作更简洁，使得开发者可以专注于每个新版本核心功能的开发。应用内自带的开发者菜单为我节省了大量的时间。其中我最喜欢的一个功能是Show Inspector（审查工具），它可以即时展现交互视图的层级结构以及被选组件中所有必要的样式信息，这无疑是我用过的最棒的iOS审查工具。社区React Native项目每两周会发布一个新版本，其中包含一些新的特性以及修复的bug。这有利有弊，好比iOS几个月的稳定版本的发布，新的代码需要额外的时间进行升级，尤其是生产环境中的应用。因此，这也是到目前为止我们fork的React Native仓库只有四次主要升级的原因。由于React Native还不太成熟，资源有限，也不完整。但随着它越来越流行，在不久之后一定能赶上其他成熟的技术。下面列出了一些实用的资源，我也经常在它的仓库上提问和获取最新的信息：Reactiflux上的。—React Native开源组件列表。—大量的React Native文章、教程和示例。译注：中文资源：总的来说，React Native很有潜力，它把我们团队的移动应用开发带上了一个新的台阶。像我这样原生的iOS开发者可以平滑地过渡到React Native，这有些出乎我的意料。同时，它也帮助我扩展职业技能，因为我也可以很轻松地向React编写的Web应用贡献代码了。原文：&译文：&
React Native 的详细介绍：
React Native 的下载地址：
转载请注明：文章转载自 开源中国社区
本文标题：使用 React Native 一年后的感受
本文地址：
引用来自“Night_Rain”的评论不懂不要瞎说哦，底层是调用原生控件 不是网页引用来自“阿cat”的评论别装，说底层还C语言呢
引用来自“seamon”的评论你确实是不懂。react native并不是app里嵌网页，而是调用原生控件。不懂不是错，去多看书学习吧，但是不懂别硬装，让人笑话。好吧 你很懂 很牛逼 我不懂原生控件直接渲染JS H5 我不懂渲染出来的应用比原生的一模一样 我不懂跟浏览器渲染出来的完全不一样
你都懂 行了吧 你没有笑话
你懂不是错 懂但装逼就错了 也多看看做人方面的书籍，人品有很大的提升空间！
引用来自“Night_Rain”的评论不懂不要瞎说哦，底层是调用原生控件 不是网页引用来自“阿cat”的评论别装，说底层还C语言呢
你确实是不懂。react native并不是app里嵌网页，而是调用原生控件。不懂不是错，去多看书学习吧，但是不懂别硬装，让人笑话。
引用来自“Night_Rain”的评论不懂不要瞎说哦，底层是调用原生控件 不是网页哈哈 评论有亮点
引用来自“星弛”的评论。。。。。。 体验
引用来自“Night_Rain”的评论不懂不要瞎说哦，底层是调用原生控件 不是网页别装，说底层还C语言呢
不懂不要瞎说哦，底层是调用原生控件 不是网页
据说已经可以开发MacOS应用了
。。。。。。
ios系统闭源，系统统一。安卓开源，各大厂商各种定制，基本所有的single page app的都是先做ios，阿里的weex也不例外
个人认为是IOS开发人员多，苹果又各种限制，那就折腾些能折腾的了智联提示您：用人单位以任何名义向应聘者收取费用都属违法行为（如押金、资料费、代收体检费、代收淘宝信誉等），请提高警惕并注意保护个人信息！
您当前所在位置&&&当前页面
react native和react程序员
职位月薪：元/月
工作地点：
发布日期：
工作性质：全职
工作经验：不限
最低学历：不限
招聘人数：1人
职位类别：
岗位职责：&&& 1.用react native开发手机应用&&&& 2.用react.js开发b/s金融软件任职要求：&&&& 1.精通react native或者react.js
工作地址：
北京市朝阳区建华南路17号现代柏联大厦509
最新职位推荐
今日相似推荐
地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京
地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京地点：北京
公司规模：20-99人
公司性质：其它
公司行业：
公司主页：
公司地址：
北京市朝阳区建华南路17号现代柏联大厦509
您也许对以下职位类别感兴趣:
热门职位推荐: