《一个“三端”开发者眼中的React Native》作者：芋头 来自大搜车前端团队博客[思客教学] React 全端训练营 - Web 开发的未来 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
[思客教学] React 全端训练营 - Web 开发的未来
· 348 天前 · 8603 次点击
有兴趣报名话发邮件到
前端不能只做 Web 端
移动时代对 Web 有了很大的冲击，用户的注意力大规模地由浏览器转向了手机。市场随之迁移，前端技术再也不能只局限于 Web 。
但苦于浏览器的限制， Hybrid 或者 Mobile Web 始终无法做到很好的用户体验。与其花费大量的精力去优化 HTML5 应用的性能，并模仿原生组件的交互效果，还倒不如老老实实地去写原生应用。
学一次，通吃三大平台
React 的出现改变了 Web 技术的可能性。 ReactNative 直接操作原生组件，因此用户体验和原生应用完全一样。如果说 Swift 是 &Objective-C Without the C&, ReactNative 可以说是 “ Web Without the Browser ”。
虽然 React Web 和 ReactNative 的运行环境不一样，我们只需要学习一套他们共用的 Web 技术：
React Virtual DOM 。
React 的单向数据流编程模式。函数式编程风格。
Flex 布局。 相比传统的 CSS 布局方式更可控。
ES6 。成熟的 JavaScript 。模块化，更精简的语法。
W3C 事件模型。 Bubble 和 Capture 。
Flux 架构。
在这个 React 全端训练营我们会先在 Web 端对 React 有个初步认识。之后我们会立马转战移动端，做出棒棒哒原生应用！
Tumblr 客户端
原生滚动。
原生动画效果。
“响应式” 布局，支持不同尺寸的设备。
Swipe 任务管理
拉拽排序。
滑动删除。
Flux 架构。
用 ReactMotion 实现复杂动画效果。
手势驱动动画。
ES6 介绍。 JavaScript 模块化。 NPM 依赖管理。
盒子模型。 Flex 布局。
CSS3 预处理工具。
项目构建工具。
代码质量工具。 ESLint 。 Flow 类型推理。
React 入门。
Tumblr Web 客户端。
实现多栅栏瀑布流。
在手机端实现 Tumblr 原生客户端。
了解什么是 UIView ， iOS 的 “盒子模型”， Xcode 素材管理。
React Native 入门。
ScrollView 。
在 iPad 支持瀑布流。
实现一个可以拖拽更改排序 TodoList 应用。
监听触碰事件。
动画效果。 Animated ， LayoutAnimation ， React-Motion 。
客户端数据管理。各式各样的 “ flux ” 方案选一个来用。
适合我吗？
HTML 和 CSS 基本语法，不需要深入。
你有基础的 Javascript 知识。
你有英文阅读能力。
你爱折腾，想在书本以外动手做项目。
*最好有 Mac 和 Xcode ，但不需要 Apple Developer Program 。
没有 Javascript 经验，但是有技术底子好的话还是可以胜任。课程开始之前我会准备 JavaScript 恶补资料，自己啃一下就 ok 啦~
*注：目前 ReactNative 只支持 iOS 。使用
开发不需要 Xcode, 你愿意尝试的话也可以报名，但我无法提供技术支持。没有 Mac 愿意折腾还是可以报名，真的不行的话退款 -。-|||
和其他 IT 教学有什么不一样
自学才是最好的学习方式。这个训练营只是提供一个方向，掉坑了帮你更快的爬出来。
实战：依照任务需求自己查质料，读文档，写代码。
自主：不直接给你正确答案，而是适当的提示让你自己解决问题。
氛围：和其他有相同兴趣和理想的小伙伴们交流。
习惯：每天都加强一点点。
耐心：没有人会骂你小白。
只要你有动力学习，我就愿意花时间教你。如果有需要，你也可以约时间跟我做远端结对编程 (使用 Teamviewer 桌面分享)。
怎么申请？
发邮件给我：
名额有限。 申请时请回答以下的问题：
有兴趣申请发邮件，回答以下问题：
你的本名, Github, 博客 是什么？
你是学生还是在职？
你读了那些技术相关的书？
你解决过最难的技术问题是什么？
你为什么想加入训练营？
两天内会回复。假如没有收到回复邮件可能是邮箱问题。
有任何疑问可以直接联系我：
微信： hayeah666
电话： 186
学费多少？
在职 890 RMB 一人。学生优惠 590 。
因为这个训练营注重学员之间的互动，如果你找朋友一起学习的话可有小伙伴优惠： 690 。
如果你觉得课程不适合，或者不满意，第一周内我愿意 100% 退款。
（请不要在这个帖里结队）
这次的训练营在 9/21 周一开始。在 9/14 号前报名可以享有 100Y 的代金卷，只限 10 人哦。
以邮件收到的顺序为准，想要参加赶快发邮件报名喔！
我叫 Howard ，台湾同胞一枚。小时候随家人移民加拿大。
在大学的时候我第一次接触 Rails ，那时它刚发布 1.0 版本。大学读一半跑去一家 YCombinator 的公司做 Rails 开发。后来又去了一家叫 Versapay 加拿大做支付的公司，在那里当 tech lead 。
2010 年辞了 Versapay 的工作，成为自由工作者。 2011 年远程工作，边旅行边赚钱。我写了篇有关这个经历的博文 . 那一年第一次来到了天朝。
2012 年觉得生活太安逸，决定来中国发展，发现难度瞬间提升为 Hard 。在深圳和朋友创立了 ，做创意纸品，婚纱相册之类的产品。现在已盈利，处稳定发展状态。
2013 夏，搬到成都和女朋友在一起。
2014 夏，和妹子移居大理 ，逃离雾霾。
Twitter: @hayeah
Github: /hayeah
有兴趣的话发邮件到
71 回复 &| &直到
09:12:37 +08:00
& &348 天前 via Android
报名，求带求带再求带
& &348 天前
& &348 天前
很早就认识 Howard 同学， 以前他是个非常靠谱的 hacker.
现在他现在也是个靠谱的老师。
Teahour.fm 最新的一期时采访的他， 有兴趣的朋友可以听听:
& &348 天前 via iPhone
& &348 天前
& &348 天前 via Android
我来支持一下，学过前端和 sketch 等课，很有收获
& &348 天前
妹子和女票是一个人么？
& &348 天前
@ 哈哈哈哈
& &348 天前 via Android
先来支持下，回公司就报名
& &348 天前
前面的课程就学到了很多，持续支持
& &348 天前
又来支持了
& &347 天前
& &347 天前
窝也想报～
& &347 天前 via Smartisan T1
& &347 天前
在深圳的珠三角技术沙龙见过楼主，典型的技术男啊
& &347 天前
赞 Tumblr 的视频
& &347 天前
话说大大现在首选 flux 是哪个？ redux 么？
& &347 天前
。 基本上就只是用一个模块封装数据，然后模块 export 函数来操作数据 + 监听。
flux 对小应用来说太繁琐了
& &347 天前
@ 好久以前了。。。在帝王大夏的那次吗？
& &347 天前
@ 妹子女票老婆老板是同一人。。。自邓小平以来权利最集中的人之一。
& &347 天前
@ 是的，当时才知道你搞的小象网
& &347 天前
刚听完 teahour 就在这里看到此帖
& &347 天前
@ 哈哈真巧~
& &347 天前
哈哈，想报名，正在学 js 的 iOS 程序
& &347 天前
只是想知道隐居大理怎么做程序员……
& &347 天前
想学习，想报名，最近也在自学，读了各种技术文档。
但是，上面那几个问题，我真不知道要怎么回答……虽然门槛不高……
& &347 天前
@ 活捉 terry 太
& &346 天前
说得太好了，我差点相信未来就是 React 了
& &346 天前
想學，然而工資太少負擔不起學費，支持一下 Howard
& &346 天前
支持老大。
& &346 天前
@ 只是想了解你的技术背景而已，想到什么就说什么呗~
& &346 天前
@ 自由职业咯
& &346 天前
@ 哈哈洗脑！ JavaScript 是世界上第二好的语言，值得学习~
& &346 天前
@ 仅次于 LISP ，哈哈……
& &346 天前
请问地点是在哪？深圳？
& &346 天前
@ 还是远程？
& &346 天前
以前以为 React 只是一个前端库. 怎么就跨平台开发了? 想学学.
和 APICloud (AppCan ), DCloud 不同吗? 对比怎样?
& &346 天前
远程学习么?
& &346 天前
在南山图书馆见过一次 howard
& &346 天前
刚毕业。。结果只能算在职了。。然而工资都没领几个月， mac 也买不起。桑心。好想学啊=。=
& &346 天前
& &346 天前
@ AngularJS/Ionic 好像更成熟一些吧，去年我们已经在项目使用了，当时 1.0 还没正式发布。最新的版本，一套代码，好像 IOS ， Android 可以套不同排版和样式了。唉，半年没关注了。
& &346 天前
表示很有兴趣，可是看到上课用 Mac 就 … 全家微软 :(
& &346 天前
这种事居然不 @ 我们...
& &346 天前
@ ,每天的课程大约要花多上时间来完成？
& &346 天前 via iPhone
兄弟牛逼啊
& &346 天前
上次报名了，但是错过了上课，可惜
& &346 天前
个个封装成组件，开发效率有点悬
而且只能通过 property 单向通信，，，，，，，，
& &346 天前
叶老师，
我能搭车招带「 React 」光环的「前端工程师」么？
&small style=&opacity: 0.1&&有意者私信&/small&
& &345 天前
react-native 编译后就是原生了吗？
& &344 天前
@ 梦寐以求…感觉很滋润
& &343 天前
@ 是远程的~ （终于回来回复帖子了 orz ）
& &343 天前
@ 哈哈 -。- 你之前没真的上 NodeJS 嘛~ 有兴趣的话补个差价就好了
& &343 天前
之前 NodeJS 没上的话可以还是可以来哦，补差价就行了
& &343 天前
@ APICloud/LeanCloud 这些是后端服务。 React 现在支持多种 “绚烂” 机制。 DOM 是一种， iOS 原生组件是一种。之前还有人搞了个 ncurse 的 React 绚烂层
& &343 天前
@ ReactNative 的架构是这样的。。。有个 JS 环境运行环境处理 React/UI 逻辑 /业务逻辑。 React 计算出新的 UI 之后会通过一个桥梁让 iOS 端的 “浏览器” 去计算布局，刷新 UI ，启动动画，等等。
iOS 端上的 “浏览器” 其实就是 iOS 的原生组件构成的，并没有 DOM 或者 CSS 的实现。比如说 &View& 这个组件对应 RCTView 这个原生组件，而 `backgroundColor` 这个 ‘ CSS ’ 属性是通过桥梁去对应 UIView 的背景色。
& &343 天前
@ 理解为一个 'partial' 一个组件吧。组件的颗粒度多大按项目需求决定。
& &343 天前
@ 我一看到你就感觉好开心，哈
& &343 天前
@ 啊？我是很有喜感吗？
& &343 天前 via iPhone
如果能给个 demo 我们看看水平就更有吸引力。
& &343 天前
@ 课程里要做的应用有视频 demo 啊。帖子里的那些。
& &343 天前
@ 嗷嗷，移动端上 V2EX 没有绚烂 markdown 。要在左面上看 -。-
& &343 天前
& &342 天前
顶， hayeah
& &342 天前
图片，是你的娘子么？
& &340 天前
& &340 天前
@ 不是... tumblr 上刷出来的。要不然我就靠她吃软饭了。
& &338 天前
今天 react native for android 公布了，是不是要加一项内容了？
& &332 天前
@ 请问人满了吗？
& &332 天前
已发，是不是晚了
& &225 天前
@ 还有名额没？
& · & 1532 人在线 & 最高记录 2011 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.7.3 · 85ms · UTC 05:07 · PVG 13:07 · LAX 22:07 · JFK 01:07? Do have faith in what you're doing.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
相关热门文章【Himi个人博客开站】
Himi 独立个人博客开放啦！更多更新的博文尽在：&
xiaominghimi 的BLOG
移动开发专家,专注于移动开发领域,多年 J2me、Android、iOS 平台游戏开发经验;CSDN、ITeye、51CTO、eoe-Android、中国移动开发者社区、微度网等多家技术论坛担任专家与版主；
用户名：xiaominghimi
文章数：190
评论数：227
访问量：1075281
无忧币：2870
注册日期：
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2346.html补充说明：一：很多童鞋问，键盘调出来被挡住..
一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要。那么Himi先讲解React Native与iOS之间的通信交互。
本篇主要分为两部分讲解：(关于其中讲解的OC语法等不介绍，不懂的..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2294.html本篇主要来详细介绍如何安装、升级插件及讲解..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2315.htmlHimi最近在真机运行遇到 Command /bin/s..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2288.html
由于React Native..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2285.html在第五篇中介绍了使用导航Navigator进行(页面)..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2260.html
本篇介绍两个细节：&nbs..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2252.html前几天，Himi 写练手项目时，遇到子更新父stat..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2248.html今天介绍一种应用开发中常用的负责页面切换及..
本站文章均为李华明Himi原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接:/react-native/2242.html开发过游戏的都应该很清楚，“刷屏”是多么的..
&&页数 ( 1/2 )
Himi技术交流QQ群
.。【Unreal Engine】Unreal Engine：.。【React Native】React Native：&.。【Cocos Creator】Cocos Creator：.。【Cocos2dx】Cocos2d-x：
.。【C2dx-Lua】Cocos2d-x-Lua：
腾讯微博：新浪微薄：
订阅我的博客