宽度单位和像素密度
react的宽度不支持百分比，设置宽度时不需要带单位 {width: 10}， 那么10代表的具体宽度是多少呢？
不知道是官网文档不全还是我眼瞎，反正是没找到，那做一个实验自己找吧：
var Dimensions = require('Dimensions');
&Text style={styles.welcome}&
window.width={Dimensions.get('window').width + '\n'}
window.height={Dimensions.get('window').height + '\n'}
pxielRatio={PixelRatio.get()}
默认用的是ihone6的模拟器结果是：
window.width=375
window.height=667
我们知道iphone系列的尺寸如下图：
可以看到iphone 6的宽度为 375pt，对应了上边的375，实际上官文指出的单位为 dp 。 那如何获取实际的像素尺寸呢？ 这对图片的高清化很重要，如果我的图片大小为100100 px. 设置宽度为100
100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。
react 提供了PixelRatio 的获取方式
var image = getImage({
width: 200 * PixelRatio.get(),
height: 100 * PixelRatio.get()
&Image source={image} style={{width: 200, height: 100}} /&
flex的布局
我们知道一个div如果不设置宽度，默认的会占用100%的宽度， 为了验证100%这个问题， 做三个实验
根节点上方一个View， 不设置宽度
固定宽度的元素上设置一个View， 不设置宽度
flex的元素上放一个View宽度， 不设置宽度
&Text style={[styles.text, styles.header]}&
根节点上放一个元素，不设置宽度
&View style={{height: 20, backgroundColor: '#333333'}} /&
&Text style={[styles.text, styles.header]}&
固定宽度的元素上放一个View，不设置宽度
&View style={{width: 100}}&
&View style={{height: 20, backgroundColor: '#333333'}} /&
&Text style={[styles.text, styles.header]}&
flex的元素上放一个View，不设置宽度
&View style={{flexDirection: 'row'}}&
&View style={{flex: 1}}&
&View style={{height: 20, backgroundColor: '#333333'}} /&
&View style={{flex: 1}}/&
结果可以看到flex的元素如果不设置宽度， 都会百分之百的占满父容器。
水平垂直居中
css 里边经常会做的事情是去讲一个文本或者图片水平垂直居中，如果使用过css 的flexbox当然知道使用alignItems 和 justifyContent . 那用react-native也来做一下实验
&Text style={[styles.text, styles.header]}&
&View style={{height: 100, backgroundColor: '#333333', alignItems: 'center'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/&
&Text style={[styles.text, styles.header]}&
&View style={{height: 100, backgroundColor: '#333333', justifyContent: 'center'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/&
&Text style={[styles.text, styles.header]}&
水平垂直居中
&View style={{height: 100, backgroundColor: '#333333', alignItems: 'center', justifyContent: 'center'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/&
网格布局实验， 网格布局能够满足绝大多数的日常开发需求，所以只要满足网格布局的spec，那么就可以证明react的flex布局能够满足正常开发需求
等分的网格
&View style={styles.flexContainer}&
&View style={styles.cell}&
&Text style={styles.welcome}&
&View style={styles.cell}&
&Text style={styles.welcome}&
&View style={styles.cell}&
&Text style={styles.welcome}&
styles = {
flexContainer: {
// 容器需要添加direction才能变成让子元素flex
flexDirection: 'row'
height: 50,
backgroundColor: '#aaaaaa'
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
左边固定， 右边固定，中间flex的布局
&View style={styles.flexContainer}&
&View style={styles.cellfixed}&
&Text style={styles.welcome}&
&View style={styles.cell}&
&Text style={styles.welcome}&
&View style={styles.cellfixed}&
&Text style={styles.welcome}&
styles = {
flexContainer: {
// 容器需要添加direction才能变成让子元素flex
flexDirection: 'row'
height: 50,
backgroundColor: '#aaaaaa'
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
cellfixed: {
height: 50,
width: 80,
backgroundColor: '#fefefe'
嵌套的网格
通常网格不是一层的，布局容器都是一层套一层的， 所以必须验证在real world下面的网格布局
&Text style={[styles.text, styles.header]}&
嵌套的网格
&View style={{flexDirection: 'row', height: 200, backgroundColor:"#fefefe", padding: 20}}&
&View style={{flex: 1, flexDirection:'column', padding: 15, backgroundColor:"#eeeeee"}}&
&View style={{flex: 1, backgroundColor:"#bbaaaa"}}&
&View style={{flex: 1, backgroundColor:"#aabbaa"}}&
&View style={{flex: 1, padding: 15, flexDirection:'row', backgroundColor:"#eeeeee"}}&
&View style={{flex: 1, backgroundColor:"#aaaabb"}}&
&View style={{flex: 1, flexDirection:'row', backgroundColor:"#eeaaaa"}}&
&View style={{flex: 1, backgroundColor:"#eebbaa"}}&
&View style={{flex: 1, backgroundColor:"#bbccee"}}&
&View style={{flex: 1, backgroundColor:"#eebbdd"}}&
&View style={{flex: 1, backgroundColor:"#aaccaa"}}&
&ScrollView style={{flex: 1, backgroundColor:"#bbccdd", padding: 5}}&
&View style={{flexDirection: 'row', height: 50, backgroundColor:"#fefefe"}}&
&View style={{flex: 1, flexDirection:'column', backgroundColor:"#eeeeee"}}&
&View style={{flex: 1, backgroundColor:"#bbaaaa"}}&
&View style={{flex: 1, backgroundColor:"#aabbaa"}}&
&View style={{flex: 1, flexDirection:'row', backgroundColor:"#eeeeee"}}&
&View style={{flex: 1, backgroundColor:"#aaaabb"}}&
&View style={{flex: 1, flexDirection:'row', backgroundColor:"#eeaaaa"}}&
&View style={{flex: 1, backgroundColor:"#eebbaa"}}&
&View style={{flex: 1, backgroundColor:"#bbccee"}}&
&View style={{flex: 1, backgroundColor:"#eebbdd"}}&
&View style={{flex: 1, backgroundColor:"#aaccaa"}}&
&Text style={[styles.text, styles.header, {color: '#ffffff', fontSize: 12}]}&
{(function(){
var str = '';
var n = 100;
while(n--) {
str += '嵌套的网格' + '\n';
&/ScrollView&
好在没被我玩儿坏，可以看到上图的嵌套关系也是足够的复杂的，（我还加了一个ScrollView，然后再嵌套整个结构）嵌套多层的布局是没有问题的。
首先我们得知道图片有一个stretchMode. 通过Image.resizeMode访问
找出有哪些mode
var keys = Object.keys(Image.resizeMode).join('
打印出来的是 contain, cover, stretch 这几种模式， （官方文档不知道为什么不直接给出）
尝试使用这些mode
&Text style={styles.welcome}& 100px height &/Text&
&Image style={{height: 100}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
100px 高度， 可以看到图片适应100高度和全屏宽度，背景居中适应未拉伸但是被截断也就是cover。
&Text style={styles.welcome}& 100px height with resizeMode contain &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000'}]}&
&Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
contain 模式容器完全容纳图片，图片自适应宽高
&Text style={styles.welcome}& 100px height with resizeMode cover &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000'}]}&
&Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.cover}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
cover模式同100px高度模式
&Text style={styles.welcome}& 100px height with resizeMode stretch &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000'}]}&
&Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.stretch}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
stretch模式图片被拉伸适应屏幕
&Text style={styles.welcome}& set height to image container &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000', height: 100}]}&
&Image style={{flex: 1}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
随便试验了一下， 发现高度设置到父容器，图片flex的时候也会等同于cover模式
绝对定位和相对定位
&View style={{flex: 1, height: 100, backgroundColor: '#333333'}}&
&View style={[styles.circle, {position: 'absolute', top: 50, left: 180}]}&
styles = {
backgroundColor: '#fe0000',
borderRadius: 10,
width: 20,
height: 20
和css的标准不同的是， 元素容器不用设置position：'absolute|relative' .
&View style={{flex: 1, height: 100, backgroundColor: '#333333'}}&
&View style={[styles.circle, {position: 'relative', top: 50, left: 50, marginLeft: 50}]}&
相对定位的可以看到很容易的配合margin做到了。 （我还担心不能配合margin，所以测试了一下：-：）
padding和margin
我们知道在css中区分inline元素和block元素，既然react-native实现了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。
&Text style={[styles.text, styles.header]}&
在正常的View上设置padding
&View style={{padding: 30, backgroundColor: '#333333'}}&
&Text style={[styles.text, {color: '#fefefe'}]}& Text Element&/Text&
&Text style={[styles.text, styles.header]}&
在文本元素上设置padding
&View style={{padding: 0, backgroundColor: '#333333'}}&
&Text style={[styles.text, {backgroundColor: '#fe0000', padding: 30}]}&
text 元素上设置paddinga
在View上设置padding很顺利，没有任何问题， 但是如果在inline元素上设置padding， 发现会出现上面的错误， paddingTop和paddingBottom都被挤成marginBottom了。 按理说，不应该对Text做padding处理， 但是确实有这样的问题存在，所以可以将这个问题mark一下。
&Text style={[styles.text, styles.header]}&
在正常的View上设置margin
&View style={{backgroundColor: '#333333'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, margin: 30}}/&
&Text style={[styles.text, styles.header]}&
在文本元素上设置margin
&View style={{backgroundColor: '#333333'}}&
&Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}&
text 元素上设置margin
&Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}&
text 元素上设置margin
我们知道，对于inline元素，设置margin-left和margin-right有效，top和bottom按理是不会生效的， 但是上图的结果可以看到，实际是生效了的。所以现在给我的感觉是Text元素更应该理解为一个不能设置padding的block。
算了不要猜了， 我们看看官方文档怎么说Text，
&Text&First part and &/Text&
&Text&second part&/Text&
// Text container: all the text flows as if it was one
// |First part |
// |and second |
&Text&First part and &/Text&
&Text&second part&/Text&
// View container: each text is its own block
// |First part |
// |second part|
也就是如果Text元素在Text里边，可以考虑为inline， 如果单独在View里边，那就是Block。 下面会专门研究一下文本相关的布局
首先我们得考虑对于Text元素我们希望有哪些功能或者想验证哪些功能：
文字是否能自动换行？
overflow ellipse？
是否能对部分文字设置样式 ，类似span等标签
先看看文字有哪些支持的style属性
/*==========TEXT================*/
Attributes.style = {
color string
containerBackgroundColor string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight number
textAlign enum("auto", 'left', 'right', 'center')
writingDirection enum("auto", 'ltr', 'rtl')
实验1， 2， 3
&Text style={[styles.text, styles.header]}&
&View style={{backgroundColor: '#333333', padding: 10}}&
&Text style={styles.baseText} numberOfLines={5}&
&Text style={styles.titleText} onPress={this.onPressTitle}&
文本元素{'\n'}
{'\n'}In this example, the nested title and body text will inherit the fontFamily from styles.baseText, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines, numberOfLines is Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
styles = {
baseText: {
fontFamily: 'Cochin',
color: 'white'
titleText: {
fontSize: 20,
fontWeight: 'bold',
从结果来看1，2，3得到验证。 但是不知道各位有没有发现问题， 为什么底部空出了这么多空间， 没有设置高度啊。 我去除numberOfLines={5} 这行代码，效果如下：
所以实际上， 那段空间是文本撑开的， 但是文本被numberOfLines={5} 截取了，但是剩余的空间还在。 我猜这应该是个bug。
其实官方文档里边把numberOfLines={5}这句放到的是长文本的Text元素上的，也就是子Text上的。 实际结果是不生效。
这应该又是一个bug。
Text元素的子Text元素的具体实现是怎样的， 感觉这货会有很多bug， 看官文
&Text style={{fontWeight: 'bold'}}&
&Text style={{color: 'red'}}&
Behind the scenes, this is going to be converted to a flat NSAttributedString that contains the following information
"I am bold and red"
9-17: bold, red
好吧， 那对于numberOfLines={5}
放在子Text元素上的那种bug倒是可以解释了。
Text的样式继承
实际上React-native里边是没有样式继承这种说法的， 但是对于Text元素里边的Text元素，上面的例子可以看出存在继承。 那既然有继承，问题就来了！
到底是继承的最外层的Text的值呢，还是继承父亲Text的值呢？
&Text style={[styles.text, styles.header]}&
文本样式继承
&View style={{backgroundColor: '#333333', padding: 10}}&
&Text style={{color: 'white'}}&
&Text style={{color: 'red'}} onPress={this.onPressTitle}&
文本元素{'\n'}
&Text&我是white还是red呢？{'\n'} &/Text&
&Text&我应该是white的&/Text&
结果可见是直接继承父亲Text的。
react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度。
基于flex的布局
view默认宽度为100%
水平居中用alignItems, 垂直居中用justifyContent
基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug
通过Image.resizeMode来适配图片布局，包括contain, cover, stretch
默认不设置模式等于cover模式
contain模式自适应宽高，给出高度值即可
cover铺满容器，但是会做截取
stretch铺满容器，拉伸
定位相对于父元素，父元素不用设置position也行
padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom
文字必须放在Text元素里边
Text元素可以相互嵌套，且存在样式继承关系
numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间
你可能感兴趣的文章
46 收藏，6.3k
22 收藏，2.6k
29 收藏，1.4k
本文隶属于专栏
再也不要让项目可耻的烂尾了！
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知坑很多，跳之前做好准备。没有VPN的同学请浏览完本文后慎行。
你需要先安装最新版本的node.js（我最后使用的是v4.1.2），
注：我win7已经安装过Visual Studio 2013和Android开发环境（也踩了不少坑，后面有截图）
为了方便切换npm源，需要先安装nrm模块
因为公司内把taobao全线屏蔽了，所以我用了cnpm的镜像
因为我之前电脑里安装了node的v0.12.7版本，所以我遇到了下面的坑
如果你也跟我一样启动的时候报错了，那么你需要升级node.js，直接到官网下载并安装，安装路径覆盖现有安装目录即可。官网上也提到node的最低版本要求
更新完node后
一切正常了，你可以在浏览器里访问：
保留packager的dos窗口，新建另外一个dos窗口，切换至项目目录下：react-native run-android
报错了，你需要设置ANDROID_HOME的环境变量，跟JAVA_HOME类似的，这里直接略过了…
遇到这个错误，我是被坑了很久，说下过程。我尝试下载并安装Android Studio。 启动Android Studio后报错了
如果你也遇到此问题，可以参考这里解决：
最后启动Android Studio后，打开SDK Manager，设置镜像后，下载安装指定的SDK，参数下面这篇文章：
在Windows下搭建React Native开发环境
腾讯Bugly加速
一切就绪，再次运行时遇到了这个问题
此时你需要开启VPN，静静等待好消息吧…
我连接的是真机，apk安装好之后，此时可能会遇到错误。我遇到的错误与这篇文章一样：
选择 Dev Settings，然后输入本机的IP地址
按上面文章的操作处理后，如果一直连不上，用PC上的浏览器访问一下地址，浏览器能正常访问但手机访问时在packager的DOS窗口没有看到log输出，那么你可以尝试使用下面的命令：
参考网址：
最后的最后，期待已久的界面出来了。
修改文字，然后重新载入JS，应用不需要重启，效果如下：
总体来说，按照网上的资料你是能一步一步解决问题的。我遇到的问题跟我之前安装的环境有问题，所以导致了一些问题，祝诸君都能顺利看到Welcome to React Native!界面
主要的几个命令：
1、初始化项目 react-native init projectName
2、dos进入项目文件夹之后 react-native start，启动服务
3、另外开启一个DOS窗口，启动应用：react-native run-android
------- update by
使用最新版本的react-native(0.15.0)，因为之前本机已经成功运行过react-native，再次按照上面的几个命令操作的时候，发现真机运行会报错：
ReferenceError: Can't find variable: require(line 1 the generated bundle)   github上也有链接
点RELOAD JS按钮之后就报
Unable to download JS Bundle
PC上访问：http://localhost:8081/index.android.bundle?platform=android 正常，我就纳闷了，折腾了好久：包含升级node.js版本为（结果发现没用），重新编译（react-native  run-android --refresh-dependencies）  adb reverse tcp:8081 tcp:8081 然并卵，错误依旧
最后调用真机菜单，把设置重新填了一下，发现OK. Menu -& Dev Settings -& Debug server host & port for device，eg: 192.168.0.xx:port
以前写node.js相关的文章也遇到很多人发消息或邮件来问，现在写react-native也有这种势头，但是因为我本机之前就已经安装过Android的开发环境，所以对于从来没接触过相关知识的童鞋来讲，可能有点疑惑。我贴几个我本机的环境：
ANDROID_HOME 出错的提示已经很明确的告知了，它其实就是Android的SDK根目录，不行你就安装Android Studio，它里面就帮你下载好了SDK，里面包含SDK Manager和AVD Manager等
阅读(...) 评论()react-native android 怎么roadjs_百度知道
react-native android 怎么roadjs
提问者采纳
然后执行 npm install 先安装 react 依赖模块包6、进入 这个博客 里边有 react-native for android 项目，下载下来、打开两个 命令窗口 1.1 版本21、然后 安装了 npm install -g react-native-cli 模块3、安装gradle 环境5. 一个 执行react-native start 、首先安装了nodejs 4、安装 android sdk 并且配置android 环境变量4
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何评价 React Native？
如何评价 React Native？
如何评价 React Native？
write native apps with React.js？
按票数排序
哈哈，大家都不看好它，我倒是觉得它非常不错。先说一下传统的 hybrid app 的一些优劣势：优
势：js 可以直接被 native 端执行，也可以和 native code 进行通讯，进而可以调用一些 native 提供的接口。
能直接被执行的好处在于可以直接从服务器上载入并执行 js 代码，这点在 iOS 上是 native code 和其他 to objc
的语言都难以做到的。这使我们有了一些更灵活的方法，来完成诸如应用内更新或者开发应用内插件之类的工作。同时，iOS 和 Android
可以共享一些前端部分的代码，使得代码能够更好地重用。劣势：界面渲染效率低，多线程支持差，GC 问题。在 WebView 中绘制界面、实现动画的效率都比较低，开销也比较大。WebWorker 提供的多线程在 native 端有很大的局限，js 在 GC 时也有可能卡 UI。React Native 的做法非常激进，完全抛弃了 HTML（抛弃了 HTML 不代表抛弃了声明式），抛弃了 WebView，在 background thread 里运行 js 并直接使用原生控件进行渲染。这
从根本上解决了渲染问题，使得 js 不再只能做 hybrid app，而能做出具有 native behavior 的流畅靠谱的 native
app。从这一点上来说 React Native 已经做得相当不错了，尽管它只实现了 CSS 的子集，但是考虑到 CSS
如此复杂而它又抛弃了使用 webview 渲染，这是可以接受的。===========但是，React 的意义绝不在于解决了一些 hybrid app 的痛点。React 是一个很有野心的项目，它的目标不仅仅是简单地使前端能用 js 写 native app，而是希望推广一个通用的前端构建方案，不论是 Web 前端，还是客户端前端。FB
在演讲里说，React 的目标不是 “Write once, run
anywhere"，因为不同平台的差异是客观存在的，设计风格也各有不同。它要做的，是 “Learn once, write
anywhere”。React 里的 view 不仅可以是 DOM，也可以是 iOS 控件或者 Android 控件，不论是什么平台，都能
“build in React”。就我看来，前端不只是需要写网页，更重要的是要解决属于前端领域的各种问题。Web 前端和客户端前端在本质上是一致的，探索前端领域的最佳实践是一件很有意义的事。近些年前端比较火，相比于自成体系较为封闭的客户端前端， Web 前端在前端实践上的探索或许更多一些。不管是阿里的 Midway 那样侵入到后端的 UI layer，还是像 React Native 这样侵入到客户端前端，我认为都是非常值得称赞的探索。至于到底怎么评价 React Native，我觉得它和 React 一样赞。===========最后附个 FB 关于 React Native 的演讲：
一直在跟进 React.js , 中文论坛()也主要是我在维护, 吐个槽本人前端, Macbook 用户, Android 用户, 但是不会移动端的开发首先如果 Facebook 发布 React Native, 那么移动端开发的门槛瞬间降低, 非常好的消息当然这个也将促使更多人选择 React 这样一套方案, 社区当中的资源也会更丰富结果就是会有很多人来参与研究用 React 的范式怎样来编程, 这是我们非常希望看到的React 有一个观点很明白, 就是以往的编程太多过程式的写法, 他们想要变成声明式的,因为声明式的写法能讲底层逻辑交给可靠的代码, 那么开发者的门槛极大地降低发布会演讲提到的就是随着应用变大, 逻辑变复杂, 用 React 的话后来的开发者很好上手相信这也是很多人选择 Angular 的原因.. 虽然两者实现声明式编程的语法和方式差别还是不小那么 React 现在靠着它摆脱了 DOM 的高度的抽象, 想要把同样的开发方式复制到本地应用!顺带地, React 把前端的事件系统, Flexbox 布局, 打算复制到移动开发上这个对于前端开发者来说会是很好的消息, 特别是已经用 React 写了很多前端代码的对于移动端我希望是在 React Native 稳定版发布以后, 能被移动端开发者认可...就我个人来说, 我倾向于认为 Functional Reactive Programming 一路的图形开发前途更好比如 Elm, 比如 React, 对界面还有数据及逻辑都做了比较理论化的考虑..那我很期待各种图形开发当中能引入这个我认为非常高效的方案另外, Web 开发当中灵活的布局系统我也希望在我学习开发其他平台时能继续使用.
其实最应该期待的是ui以及编译环境的整合，这些已经有ionic做榜样，js to native也有Ti趟了几年雷。工程结构上比ionic的angular讨巧。看起来会牛的，但这些优势目前我串不起来，没法预期会是个什么东西。我多说一点，以我的观察，没ide火起来难。
我先来答吧。从很久以前就警告了用HTML5来做App有多不靠谱，不过各种Cloud还是不断出现。说到底，HTML5做App的优势和劣势都是HTML本身，或者说是DOM，成也萧何败也萧何。归功于CSS这个神器，UI制作变得非常简单而强大。但是却因为DOM这个东西，每次操作都比Native View慢很多，内存开销也很大。========分割线========1. ReactJS在JS圈子里的口碑在不断爬升(虽然我没用过)，组件模式的开发体验对Native App来说非常适合。2. React Native宣称抛弃了DOM，而是纯净的JS Binding。但我还在怀疑他们是打算先用HTML做一次转换，还是直接修改React的体验，适配Native View。如果是后者，相信会非常棒。3. 还需要看看他们用的JS引擎，还有针对Mobile App的优化，比如GC。4. 从我个人角度看，FB把JS Binding和View Binding这套东西开源出来，比React自身更有意义。-----------------------看了 的回答，继续说下。现在确实各方神仙都想用自己的玩具来做本来不属于他们的领域，比如iOS。作为一个长期从事JavaScript开发的人，现在因为需求，要做iOS的开发。可能会有很多人想，有很好的前端能力，用HTML5来做会适合。但我没有这样做，而是买了一本Swift的书，重新学习一门语言。PS: 个人不太喜欢OC的语法，Swift对我来说基本可以跳过语法学习。就如上面说的，我了解完全用HTML5做App的危险性：维护成本，可用性，性能等等。有时候，学习相关的东西比用不相关的东西更来的快，更何况Swift很友好。我想说的是，跟风、傍大款是阻碍程序员进步的品质。还有，别把糖果当成银弹了。
现在趋势都是声明式UI，React却“反其道而行之”，把UI深绑定到JS中去。然后又嫌编程创建控件的方式，对于UI的树状结构太麻烦了，于是搞出了个JSX。我就纳了闷了，他们团队究竟是对JS有多执念？诚然，以现在的前端生态来看，JS的群众基础的确是好。但是用React以后，要尽量保证与传统DOM的绝缘（下文例1）。从ReactJS的Virtual DOM，到React Native的“No DOM”（引号是因为这词不是官方的）。对JS群众而言是个新的挑战。（而且JSX真的是不怎么不好用啊）因为还没有看到第二天的视频，具体的一些实例代码和技术细节都看不到，但从现在的理解看，它仅仅是用了JS而已，跟前端技术已经没什么关系了，东西都要重新学。这方面我会继续关注后面的视频。然后另一方面，因为我不会做Native开发，不知道各种控件样式一般而言是用什么来定义的，但是如果React Native要搞一套“Native CSS”，这又是个学习成本，同时也是个无底天坑了。定义样式这方面，昨天的视频里没有看到，今天的视频发出来了之后我会再关注一下。小结：React Native除了JSX以外，已经和JS的发源地——WEB前端技术没太大关系了，东西都要重新学。它并不能提供一个用Web的技术和经验来开发NativeApp的方式，这一点与Ionic有本质区别。前端开发者想因此快速做出Native开发，也许做做小样还行，做出严肃的产品，我认为还有距离。结论：我不认为这是一条给前端转Native的出路。----------------------上文例1一些UI控件，比如模态框，很常见的实现方式是把模态框从定义的节点里摘出来，塞进BODY里面，这样定位什么的非常好搞。氮素，这样做会破坏真实DOM与Virtual DOM之间的关联关系，ReactJS会罢工。例如SemanticUI中的modal组件，需要指定`detachable`才能让它不把元素剥离进BODY里去，SemanticUI的文档中说这样做会造成渲染获得更少硬件加速的优化。这还是人UI组件库设计的比较周到，如果是要捡着自己的组件库用，还不知道要踩多少坑。相比之下，Angular要友好一些，我们写的UI组件自己接管状态维护之后，只需要修改$scope，然后调用$apply，把状态维护交还给它的digest循环就行了。具体就不展开讨论了。
当你手中只有一把锤子的时候，任何东西在你眼里都是钉子
瞎说两句：1. 为什么所有语言都想用来写ios？现在还有不能写ios的语言么？2. 看了新闻，感觉还是ionic的思路，可能会更向native渗入一步？用native渲染UI？不过感觉不太可能。3.
ionic这种框架并非无用武之地，面向B端的大型移动端CRM管理系统，多人协作，N多操作业务集合，和后台数据极重的业务耦合，这种场景下，考察来考
察去，ionic是最适合的，目前感觉没有其他非常成熟的能够应用到生产中的框架。性能方面也不是非常不堪，性能方面ionic做的优化还是不错的，虽然
并非完美。4.
React和angularjs，没有特别深入，不过我作为一个开发者，并不关心他们的实现有多取巧，性能有多棒，模式有多新颖。我最关心的一点，开发方
不方便？是否足够简单？团队开发快速上手？目前没看到React的优势，可能是了解不够多，但是感觉angularjs足够了，也不想了解更多。
看了那个keynote，我看到的是脸书说他们的js跑到了一个单独的线程里面，所以很流畅。从这个思路来说，应该是直接用native ui的程序员不会注意写多线程，而用了react native 天生并发加成？
HHVM有什么意义？
Titanium () 就是和 React Native 一样的逻辑，用 js 调用原生控件。这样很好，解决了界面体验问题。不过也有没解决的问题。他们无法代替原生的 API，很多效果，开源的控件，都要用原生的代码来实现。简单的 app 没什么问题。遇到复杂的 app，还是原生代码来的靠谱。
服务器端有js语言的node.js，现在客户端又有了个js的react native，前端js，正所谓learn once write anywhere。虽然各个平台的东西需要熟悉，最起码语言层面可以节省一些不必要的精力。
无非是4-5年前的悲剧轮回 典型的好了伤疤忘了疼要知道2012年 fb宣称用h5写iOS客户端 是他们犯的大错Facebook: “Betting on HTML5 Was a Mistake” – Technical Reasons and Reactions
我来回答这个问题写回答…
发表评论：
馆藏&18954
TA的最新馆藏