React Native实战（一）：配置和起步
发表于 15:40|
作者廖祜秋
摘要：MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
10月14日-16日，由CSDN和创新工场联合主办的将在北京新云南皇冠假日酒店隆重召开，现在抢注大会门票，即享多重好礼！
Facebook开源React Native也势要统一移动端编程语言，而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC
2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React
Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
图：阿里巴巴工程师 廖祜秋
以下为正文：
2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React
/ React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和
Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac （除了听说网易有些部门写 iOS
给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是 Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对
Android 开发也是不给 Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
需要安装的有：
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击
安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit )
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
brew install nvm
的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node
也可以直接下载安装 Node.js：
安装好之后，如下：
mac-2:react-native srain$ node -v
mac-2:react-native srain$ npm -v
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
安装即可：
npm install -g react-native-cli
App开发环境的设置
XCode 6.3 及其以上即可。
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
drwxr-xr-x
476 Sep 21 09:52 android
-rw-r--r--
1023 Sep 21 11:47 index.android.js
-rw-r--r--
1065 Sep 20 11:58 index.ios.js
drwxr-xr-x
204 Sep 20 11:58 ios
drwxr-xr-x
170 Sep 21 10:31 node_modules
-rw-r--r--
209 Sep 20 11:58 package.json
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在
8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? + R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
react-native run-android
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js 即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting & Debug Server host
for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
react-native start
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍：
重点介绍 Android 相关的开发：包括组件，源码分析等；
动态热部署；
多端代码复用。
官方文档：
时间仓促，水平有限，如有谬误，还请纠正，原始文档在。
将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场：平台与技术（iOS）、平台与技术（Android）、平台与技术（跨平台）、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队，与开发者一道进行最前沿的探讨与交流。&
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章\ 经验分享
React Native 初探（iOS）
不知从何时起，移动端App开发，采用Native还是使用Web的争论不绝于耳。二者的优缺点不再赘述。Web App当然是开发者期待的理想结果，但是由于Native App在用户体验上的绝对碾压，大部分移动端App还是采用Native的方式，少数架构复杂、对Web依赖较多的App，会采用一种称为Hybrid（Web + Native）的开发方式，在iOS上，Native通过-[UIWebView stringByEvaluatingJavaScriptFromString:]调用Web，而Web则是通过设置WebView iframe的src，搭建JSBridge进行通讯。由于微信和手机支付宝的的成功，Hybrid App这种开发方式确实引起了关注，但从我这么一个最底层iOS开发者的技术角度来说，这种JSBridge的通讯方式，实在不是特别高明，能解决的场景也十分有限。
前几天FB正式推出了React Native。由于惯性思维，我总想着往它身上贴个「Web」或者「Native」或者「Hybrid」的标签，可是贴上去扯下来，并没有一个适合的标签。事实上，React Native重新定义了一种新的模式。
浏览器引擎是如何工作的
在说React Native之前，让我们以WebKit为例，先扯一扯一个浏览器引擎的工作流程。从下图可以看出，一个网页的生命周期，大致经历了加载、解析、排版、绘制（JS引擎暂时不提）。
接触过iOS平台上的简易的浏览器引擎，大致的工作流程，也是如此。由于加载流程涉及网络模块，部分排版和渲染流程涉及Native UI控件，为解决不同平台的差异性，一般是抽象接口，由不同平台实现各自的网络模块和网页的绘制。
简单来说，一个浏览器渲染引擎，其实就是将网页从服务器或者本地load下来，用一套规则解释这个网页，最后用平台最舒服的方式，展现到屏幕上去。
React Native
一个浏览器引擎
由于对浏览器印象深刻，这是React Native给我的第一印象。由于我对前端的了解，只停留在html和Javascript的简单语法上，完全不知ReactJS为何物，所以我只能尝试着从开源的iOS React Native的OC端代码，解释一下。
加载： OC层加载JS源数据（可以称为：使用ReactJS框架的？），并利用JavascriptCore.framework搭建起OCBridge，作为和JS层通讯的工具。
解析：解析过程由JS端完成，通过JSBridge，调用OC层将解析结果映射到Native（事实上并没有JSBridge，后面细讲）。映射结果包括了视图的层次结构，Native UI节点的属性值（颜色、文字内容等）。
排版： OC层通过确定节点的位置。
绘制： Native UI节点进行drawRect。
得益于JavascriptCore，React Native能够抛弃WebView直接运行JS，在React Native，OC层只负责控制程序生命周期，以及提供平台Native控件的工作；而JS层则负责提供数据，响应交互事件，充当了DataSource和Delegate的角色。
这里的通信，是指JS和OC之间的通信。
前面已经提到，OCBridge是利用JavascriptCore直接调用JS代码的。OC层实现这个类的是RCTBridge，目前的代码是使用RCTContextExecutor作为具体的执行者。JavascriptCore是iOS7才开放的接口，不过目前的代码还有另外一套RCTWebViewExecutor，里面用的是通过UIWebView调用JS，可能是为了以后兼容旧版本的iOS。使用JavascriptCore最显而易见的优势就是，整个执行过程都可以在后台线程执行，事实上RCTContextExecutor单独开了一个名为「com.facebook.React.JavaScript」的线程，供自己使用。
上面只提到OCBridge，那JSBridge呢？
答案是，没有JSBridge。前面提到，OC层提供Native控件，JS层更多地是扮演DataSource和Delegate的角色。回想一下UITableview的使用，为UITableview设置DataSource和Delegate之后，使用者并不需要关心UITableview是如何被创建绘制，以及如何监听点击长按之类的交互事件。同理，JS层作为使用者，并不需要关心Native事件是如何触发的，需要关心的是，当事件触发时该如何响应。所以，一个原本需要双向通信的机制，被简化成单向通信。
这个机制，可以通过查看-[RCTBridge enqueueJSCall:args:]这个函数的Callers来验证（这个函数是OC层调用JS的入口函数），它的 Callers包括了：Device Event（如前后台切换）、Input State（如控件Value改变）、Timer回调、Touch事件回调等等。
那JS层是如何实现调用OC层的呢？是通过返回值。在事件触发OC层调用JS之后，会获得一段JSON数据作为返回值，OC层只需要按照协议，解析这段JSON数据，依次调用Native代码即可。
JS调用OC的协议，是-[RCTBridge setUp]的时候，通过 RCTRemoteModulesConfig()创建并传给JS层的。 RCTRemoteModulesConfig()主要做了几个事情：
通过 RCTBridgeModuleClassesByModuleID() 遍历所有的OC类，取出所有符合RCTBridgeModule protocol的module，以moduleID做标识。
遍历第一步取到的类，通过RCTExportedMethodsByModuleID()取出每一个类暴露给JS层的OC method，以methodID做标识，打包到module中
第二步中，暴露给JS的method，接口实现的第一句都会加上RCT_EXPORT(js_name)这个宏（实现机制十分奇特，这里不提）。
假如module需要传递给JS一些常量（比方说Native UI控件的属性枚举值），则通过实现-[RCTBridgeModule constantsToExport]，打包到module中。
将所有的module打包成Config Dictionary
当JS返回JSON数据时，实际上返回了一段包含了moduleID和methodID的队列，OC层按照协议的约定，执行对应方法。
至于OC调用JS的协议，也是通过module、method来标识的。不过这些module、method都是OC层写死的字符串，应该是和JS强绑定的，没有啥特殊之处。
解析和排版
浏览器引擎，离不开的就是dom tree 和render tree。简单来说，dom tree 是根据源数据解析而来的，包含了原始的节点信息；而render tree 则是dom tree + css。排版的目的，就是生成render tree，确定每个节点在屏幕上的大小位置。
在React Native中，解析过程是在JS层完成的，原理未知。在OC层，RCTUIManager负责将JS层的解析结果，映射到OC层的视图层级，它本身不做任何的解析操作，只是提供方法，让JS层调用而已。最终dom tree映射到OC层的结果，是一棵「RCTShadowView tree」。RCTShadowView这个名字也起得很有意思，它不是真正展现的视图，只是一个映射结果而已，每一个RCTShadowView对应一个真正的视图。RCTShadowView的另一个意义在于，它拥有一个成员变量cssNode，可以通过FB的开源项目css-layout（代码里面难得一见的两个C文件），完成排版。剩下的细节工作，就交给RCTShadowView对应的真实视图了。
其实一开始并没有打算看源码的，只是因为Demo中一张图片无法显示，让我不得不调试图片下载模块来确定问题 -_-|||（图片下载使用的是NSURLSession，这货也是iOS7才有的接口，看来React Native还没打算支持旧版本的iOS）。时间匆忙，水平有限，肯定错误连篇，还望指正。
作者：不掏蜂窝的熊
文章源自：
若觉得本文不错，就分享一下吧！
作者的热门手记
请登录后，发表评论
评论加载中...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11React-Native 入门指导系列教程目录
二、项目介绍与调试
三、CSS样式与Flex布局
四、常用UI控件的使用
五、JSX在React-Native中的应用
六、事件与数据调用
七、自定义组件
八、动手写实例
九、发布与真机调试
1. 什么是React-Native？
　　React-Native是：Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。
　　React Native的原理是：在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以&View&取代&div&，以&Image&替代&img&等。
2.React-Native有啥优缺点？
　　优点是：能够用JavaScript脚本就可以写出App的界面，对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
和其他的移动Web框架相比：
Native不用WebView，彻底摆脱了WebView让人不爽的交互和性能问题；
Native的原生控件有更好的体验；
Native有更好的手势识别；
Native有更适合的线程模型；
　　缺点是：还在试用阶段，潜在的问题尚不得而知：兼容性问题，性能问题等。还没大量普及，学习资料尚且不多，供爱折腾的朋友尝尝鲜。
3.成功案例有哪些？
　　那么，现在有哪些公司在用这个新出来的技术呢？据了解，有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。
　　天猫iPad客户端&猜你喜欢&业务，支付宝新一代的框架基于React；携程网App部分新业务；去哪儿网给航空公司用的收益辅助系统；百度图片搜索无线的新首页，部分试水；Quip 最好用的在线文档协作工具&&
4.要学些什么？
　　想必，大家已经按耐不住，会发问，使用React-Native开发要学习些什么呢？
Html+CSS+JavaScript的基本功肯定是少不了；
Node.js的基本概念学习。API文档：
JSX: JavaScript语法的一个扩展，类似XML结构。
FLUX: Facebook公司的一个创建用户客户端web程序的框架。
　　好了，废话不多，直入正题吧。
1. 硬件条件
　　你需要一台Mac电脑，或者是安装了OSX系统的电脑，这是iOS App开发的前提。
2. 软件条件
(1). 安装最新版的XCode，建议是XCode7.1及以上版本。（PS: 如果不是最新版，可能在之后新建项目的时候，会编译通不过。小编就是之前没把XCode升级到最新版，然后被一个编译问题困扰了很久。）
(2). 安装HomeBlew（OS系统上的一个安装包管理器，安装后可以方便后续安装包的安装。）
终端命令：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
(3). 安装Node.js （服务端的JavaScript运行环境）
下载地址：
成功安装后，终端会有如下提示信息：
Node.js was installed at: /usr/local/bin/node ?
npm was installed at: /usr/local/bin/npm ?
Make sure that /usr/local/bin is in your $PATH.
(4). 建议安装WatchMan（React修改source文件的一个工具）
终端命令：&
brew install watchman
(5). 安装Flow: 一个JavaScript 的静态类型检查器。
终端命令：
brew install flow
(6). 安装React Native CLI: 用来开发React Native的命令行工具
终端命令：
npm install -g react-native
装好了环境，就可以愉快的玩耍起来了。
创建项目1. 新建一个项目
　　新建一个&HelloWorld&的项目，每个语言的开始教程都是这个，我们也不例外。
操作超级简单，只需终端输入命令行：
react-native init HelloWorld&
2. 运行项目
　　创建的项目包含Andriod和iOS两个版本，我们这边就先介绍iOS的操作。(Andriod的操作也大同小异，无非就是编译的环境不同，js文件中的内容和写法都是通用的。学会了iOS的用法，再研究Andriod下的React-Native开发，会很轻松。)
　　用XCode打开ios/HelloWorld.xcodeproj文件，点击键盘"?-R&或者点击"Run"，编译运行项目。会启动React-Native服务和iOS模拟器。
　　在iOS模拟器中可以看到如图界面：
　　React-Native服务在编写过程中要一直开着，如图：
　　如果不小心把它关了，没关系，可以在终端输入：
来重新开启服务。
　　安装谷歌的Chrome Developer Tools，具体使用方法，在之后的教程中会再具体介绍。
参考文章：
　　好了，看到这里，如果你已经成功配置了React-Native的环境，并且新建并成功运行了第一个程序了。那么，就先恭喜了，我们甚至没有写一行代码，就已经成功运行了第一个React-Native的程序，是不是还挺简单的。正所谓，良好的开端是成功的一半。
　　在接下来的一篇文章中，我会和大家一起来具体看看自动新建项目中包括的内容，以及每个文件中具体写法和作用。
附上facebook官方的教程网站地址，供大家研究学习：
阅读(...) 评论()&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
[React Native混合开发]React Native for iOS之应用
摘要：JSX在React-Native中的应用一、JSX概述你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML的超类就是XML,React-Native将这个带到了解放前,不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西,JSX只是对JavaScript进行了拓展,仅此而已。二、语法介绍1、类XMLUI组件表达,在React-Na
JSX在React-Native中的应用
一、JSX概述
你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML的超类就是XML,React-Native将这个带到了解放前,不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西,JSX只是对JavaScript进行了拓展,仅此而已。
二、语法介绍
1、类XML UI组件表达,在React-Native中表现为:render: function() {
&View style={styles.container}&
&Text style={styles.welcome}&
Welcome to React Native!
);}2、js表达式在JSX中,表达式需要{}包裹,例如:render: function() {
&View style={styles.container}&
&Text style={styles.welcome}&
{0? '第一段': '第二段'}
);}上面的代码我们可以看出,style={}是一个表达式;{0? '第一段': '第二段'}是表达式,最后显示的应该是“第二段”。3、属性在HTML中,属性可以是任何值,例如:&div tagid=&00_1&&&/div&,tagid就是属性;同样,在组件上可以使用属性。建议使用以下方式:var props = {
tagid: 'GGFSJGFFATQ',
poiname: '东方明珠'};return (&View {...props}&&/View&);4、如果需要在调用组件的时候动态增加或者覆盖属性,又该如何呢?很简单:&View {...props} poiname={'虹桥机场'}&&/View&5、关于样式(1)普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象;&View style={{fontSize:40, width:80,}}& &/View&(2)调用样式表:{样式类.属性}&View style={styles.container}&&/View&(3)样式表和内联样式共存:{[]}&View style={[styles.container, {fontSize:40, width:80}]}&(4)多个样式表:{[样式类1, 样式类2]}&View style={[styles.container, styles.color]}&6、属性校验为了实现强类型语言的效果,我们可以使用propTypes来声明数据属性的合法性校验。例如:React.createClass({
porpTypes:{
username: React.PropTypes.string,
age: React.propTypes.number,
}});7、设定默认属性React.createClass({
getDefaultProps: function(){
sign: '这个家伙很懒,什么都没留下'
}});8、组件的生命周期componentWillMount:组件创建之前getInitialState:初始化状态render:渲染视图componentDidMount:渲染视图完成后componentWillUnmount:组件被卸载之前
三、了解虚拟DOM
React进行了虚拟DOM的封装,所有的视图的更新都是虚拟DOM做了一个校验(diff)后最小更新。为什么这么做,因为现在机器的内存已经足以支撑这样视图UI的diff计算,用内存计算换取UI渲染效率。1、我们需要获取组件中真实的domReact.findDOMNode(component)2、第二节已经简单说了组件的生命周期(will, did)组件的生命周期分为3个部分:Mounting:正在装载组件;Updating:重新计算渲染组件;Unmounting:卸载组件
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
[React Native混合开发]React Native for iOS之应用相关信息，包括
的信息，所有[React Native混合开发]React Native for iOS之应用相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
服务与支持
资源和社区
关注阿里云
International一个资深iOS开发者对于React Native的看法_Linux新闻_Linux公社-Linux系统门户网站
你好，游客
一个资深iOS开发者对于React Native的看法
来源：CSDN&
作者：zhe13
当我第一次尝试ReactNative的时候，我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道。
我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情，但是我很快放弃了自己去使用它的念头。毕竟我因为爱好而从事ios原生开发多年，并且目前为止已经很熟悉这一套开发专业工具。
我已经创造了一些我引以为傲的iOS应用&&一些使用Object－C和Xcode构建的应用，通常人们都是这么做的。这两样工具是苹果公司提供的、用来开发iOS应用的，所以，我和其他的苹果开发者都在用。并且当两年前苹果公司发布Swift时，我也毫不犹豫地去尝试它。
Swift依旧被使用在Xcode中，并且依旧是苹果公司推荐的开发方式，所以我很快地深入，并且毫不费力地学会了这门语言。我满足于我的苹果生态系统圈。React Native看上去只是一个小小的乐子，在我的脑海中，一切原生应用必须被 原生 地开发。对正要开始掌握 原生 开发方式的我来说，学习javascript（我并没有这方面的经验）和一种几乎全新的构建app的方式简直是荒废时间。
时间快进到几个月过后，我可以打保票说，我再也不会使用Objective－C或者Swift来开发iOS应用了。
我们接手了一个新的移动应用开发项目，我大概的看了一下设计和需求。正当我要点开Xcode那漂亮的蓝色图标新建一个新的工程时，我们的交互设计师，Adam走过来说，&我们用React Native来做这个东西吧。&
他解释说，这个项目合同的一部分明确提及了要给这个应用做一个安卓版本。尽管React Native并不支持安卓，我们知道Facebook正积极地在这方面研究。理论上来说，如果我们用RN构建了这个应用的iOS版本，很多部分能够直接工作在以后的安卓版本上。
好吧，我并不乐意。我觉得我已经站在了iOS开发能力的顶峰，现在却要我把这一切全部丢弃。在不可避免的学习曲线面前，我怀疑我是不是能够及时地发布一个高质量的产品。但除此之外，我更加质疑RN是否有能力成产一个高质量的产品。现在看来，我甚至没有觉得这样的质疑是不公平的。当时RN作为一个Beta版本刚被公布不久，文档欠缺，开源库和组建的数量稀少，演示代码或者Stack Overflow上的参考几乎没有。
我连看都不想看它一眼。但是我这种闭塞的态度只会带来更多的不良后果。我的第一道坎是学习Flexbox，RN制作UI布局的方式。从最基础的界面构建器开始，纯粹使用代码来布局UI几乎击溃了我的自信。我挣扎着去构建最基础的视觉效果。
但不仅仅是UI&&任何事情都变的不一样。这对于我是最大的挑战。
&每当我止步不前或者不理解的时候，我就告诉自己&如果用Objective－C我能够在五秒钟之内解决它&。每当我发现了RN中的一个BUG（并且bug的数量非常大），我就会想，&oc中根本不会有这种bug，我为啥一定要和RN斗智斗勇呢？&
整整两个星期，我都在工作中痛苦挣扎。我对自己的感觉从一个杰出的iOS开发者变成了一个从未写过一行代码的人。这很受挫折，直到我花费了整整一个礼拜理清了思路。我后退一步，认识到Adam对RN做了许多研究。作为我的交互知道，我不得不信任他，相信他没有把我领入一条错误的道路。我发誓我要在周一投入工作，埋头苦干，假装Objective－C和Swift从来没有存在过，并解决这个项目。
学会去喜欢React
几周之前，我们向App Store提供了第一个React Native应用。对于应用的最终表现结果我真的非常自豪，并且我迫不及待的要开始构建下一个项目了。在仅仅一个月多一点的时间里，我完全踏上了RN的贼船，是什么改变了我的想法呢？
React 范例
在React中，所有UI的组件都被放置在render（）方法中，并且被state状态控制。你的render（）方法定义了UI在各种状态是如何展现的。当调用setState()的时候，React会找到需要改变的部分并替你修改。想象一个简单的视图，拥有一个&Hello World&标签和按钮。每点击一下按钮，标签会在&Hello World&和&Goodbye World&之间切换。在Objective－C中，我在按钮的句柄中需要一些难堪的if声明，就像下面一样。&
if([label.text isEqual:@&HelloWorld&]){
label.text =@&GoodbyeWorld&;
label.text =@&HelloWorld&;
这样很有用，但是这种UI代码和我第一次创建这个标签的地方（可能在代码中，也可能在界面构建器里）完全脱节。在React中，我们会在state状态中定义一个buttonClicked的bool变量，在render()函数中，标签看起来会是这样的:
{this.state.buttonClicked ? &Hello World& : &Goodbye World&}
并且我们的按钮句柄也会非常简单
this.setState({buttonClicked:!this.state.buttonClicked});
所有和可视化相关的代码都在同一地方，并且由状态控制一切。这使得理解和修复这段代码变的非常容易。
这就是我一开始非常痛恨的UI布局工具，现在变成了RN中我最喜欢的事物之一。我承认一开始非常难以掌握，但一旦你开始使用，它把 为多种不同尺寸屏幕构建UI这件事 变的机器快速和简单。我曾经对Xcode中的可视化界面编辑器十分热衷，相比于Flexbox，它的自动布局还是国语复杂。Flexbox使用的CSS式样式使得样式重用变的和复制粘贴一样简单。其中最棒的事莫过于允许你在一瞬间将样式值改变到完美。
Live/Hot Reload
没错，想看看按钮右移5像素的样子就和command＋s一样简单。React Native能够被设置为在iPhone模拟器中自动重绘当前画面而不重建Xcode工程。这非常厉害因为你不仅可以通过避免重新编译儿节省时间，你还能够调整一个深度嵌套在应用中的界面，调整UI而不用回到最初的界面。
现在依旧没有发布，但就快了&&这一定会非常神奇。在最初我对于ReactNative犹豫不决是因为我已经习惯于做原生的iOS开发。对此我从没有过任何的抱怨。但是我也做过原生的安卓开发，这并不让人开心。React Native在安卓上会变的很瘦欢迎，同时我也在期待它的发布。这会改变移动应用开发的现状，通过使用相同的代码来部署两个平台的应用。
想念 Xcode
我还是会想念Xcode，或者说是一个IDE编辑器。我已经有了一个很好的RN开发设置，但这并不容易，Sublime Text和一大堆的插件让我有了语法高亮。sublime能够完成同一个文件中基于变量的自动补全，但始终少了一些Xcode自动补全的稳健性。我还是不得不一直查询开发者文档做参考。
小缺点，比如键入React.PropTypes.f &IDE并不会告诉我我到底在找func还是function，这很让人困惑。我也怀念Xcode的版本控制&&允许我一一比较我上一次git提交的版本和现在的版本，甚至还允许我基于行撤销一些特别的改动。我意识到第三方程序能够帮助我完成这些，但是对IDE来说最棒的事情就是将这些囊括到一个包中。（译者使用VSCode可以解决这些问题）
为了运行RN项目，我需要终端运行npm，Chrome用来debug，sublime来编辑代码，最终还需要Xcode来运行这个项目并打开模拟器。在大项目中，这些都是细小的抱怨，但是当我面对RN的时候这依旧是缺点。对于Nuclide（Facebook的新IDE）我抱有很高的期望，希望它能结束所有的这些缺点。
Facebook还没有也不会去提供所有iOS转向React Native的API，所以对于那些缺失的片段他们提供了桥接js的方法。当我第一次深入RN的时候，这方面的文档非常的糟糕。每当我意识到我需要连接某些事物的时候，我差点就对RN放弃了，因为这些事情早就能够在Objective－C中正常运作。但是当她们更加详细地解释了桥接过程，提供优秀的实例之后，这就无所惧怕了。它仍然是一个麻烦，但是我能够预见到开源社区和nom上会有所有的桥接方案。事实上，大多数的iOSAPI已经存在了。
漏洞，文档，开源社区
大概所有我最初关于RN的抱怨现在都已经消失殆尽，如果我从今天开始学习它的话。漏洞每天都在被修复，新版本每一周都在迭代。文档还需要加把劲，但比以前好多了。Facebook和开源社区对于研发这个框架变的十分严谨。人们开始聚集在Github和Stack Overflow上探讨它。如果你是一个正在考虑尝试RN的iOS开发者，你要知道你不是一个人在战斗。RN非常棒，你应该带着开放的态度拥抱他。不要像我一样吧自己局限在温室里。
走出温室，世界才刚开始。
本文永久更新链??地址：
相关资讯 & & &
& (04/27/:18)
& (12/18/:43)
& (02月04日)
& (04/27/:54)
& (10/08/:56)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款
匿名 发表于 打脸了吧，苹果给你封杀了
(0) 匿名 发表于 不求别的，只希望debug能给力一些，毕竟node和chrome上的debug工具并不像xcode和android studio那样可以随心所欲
(0) 匿名 发表于 算是高级黑吗
(0) 匿名 发表于 算是高端黑吗？
(1) Ellie 发表于 作者能提供一些react-native的优秀实例代码？刚入坑还缺乏学习的范例