万事开头难
作为一只进入ECMAScript世界不久的菜鸟，已经被React Native的名气惊到了，开源一周数万星勾起了我浓烈的兴趣。新年新气象，来个HellWorld压压惊吧^_^（故意少打个'o'）
具体的详细教程这里都有，我就说说这里没找到的几个坑，由于大部分资料还是0.1.4版本的react-native，笔者用最新的0.1.7和现有的很多是不一样的。
00.第一个坑，安卓墙
Android SDK下载：
本来抱着侥幸心理想试试能不能再低版本Android环境下编译，答案是，不能！脸书工程师的代码会校验当前Android Platform API 版本是不是=== 23，
解决方案：可以先在 这里下载Android Dev Tools，然后用国内的镜像地址设置代理再下载所需要的各种SDK，安卓资源站在这里，代理设置方法也有
nodeJS设置镜像：
这应该是开发node都知道的，我是用cnpm替代npm解决的，react-native init这条命令会拉很多dependency，不用国内的镜像要等死了。
01.第二个坑，Cygwin环境冲突
由于脸书的工程师都是用的mac电脑，对windows支持不佳，而且他们估计也没考虑到Windows可以装一种Cygwin的神奇软件。如果过程中出现了这个：
ERROR Watchman was not found in PATH. See&for installation instructions{"code":"ENOENT","errno":"ENOENT","syscall":"spawn watchman","path":"watchman","spawnargs":["--no-pretty","get-sockname"]}Error: Watchman was not found in PATH. See&for installation instructionsat exports._errnoException (util.js:874:11)at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)at onErrorNT (internal/child_process.js:344:16)at doNTCallback2 (node.js:441:9)at process._tickCallback (node.js:355:17)
在mac中说明没安装上监视文件的watchman，但是我非常纳闷为什么windows下起react-native Server会报这个错，费劲千辛万苦，发现我的Cygwin迷惑了react-native，环境中含有Linux命令，然后被判定为Linux或mac OS系统，然后去执行目前只有Linux和MAC才有的watchman程序，windows下是不需要的而且要在：
项目名\node_modules\react-native\packager\react-packager\\src\FileWatcher\index.js 中把MAX_WAIT_TIME这个变量改的很长（不要超过了整数最大值），不然25秒后依然报timeout错。
10.第三个坑，白屏
真机调试白屏，由于AVD相对比较慢，笔者直接祭出安卓6.0的真机USB调试的，发现全都是白的，啥也没有，查阅资料发现这是因为显示悬浮窗这个权限被拒绝了，去手机权限中心允许这一条就可以了（这是一个用来弹出开发菜单的浮窗）。
11.真机测试
安卓就两条命令react-react-native run-android，ios只要后面一条，然而我的黑苹果虚里脊慢的不要不要的，先玩玩安卓了。
AVD是不需要任何配置就可以直接用react-native run-android跑起来的，真机上会出现红色报错，需要进开发选项Dev Settings去配置Debug Server host（最后一个选项），设置成PC的内网IP：8081就可以了。附图& （一个js文件变成apk真的很酷炫，摇一摇就能实时更新到最新代码更酷炫~）
100.路漫漫，其坑多兮
此处只是列举了几个耗时较长的坑，目前安卓端和Windows开发环境还不成熟，想起了2年前coscos2d-x还不成熟时的踩坑噩梦。好久没碰cocos2d-x了，想想那时候写的C++好菜，现在连菜都算不上了，cocos2dx越来越主流，然而我却快忘记了。希望React Native在开源社区下更快完善，慢慢成为主流，让全栈JS变成万金油全堆JS。
阅读(...) 评论()Android手机调试运行React Native项目 - Superka1 - 博客园
comments(0)
trackbacks(0)
& &前言:由于Android自带的AVD模拟器运行速度慢，使用genymotion模拟器还要安装其他软件并且可能出现一些未知的错误，所以建议采用Android真机运行。以下操作建立在搭建好ReactNactive环境的前提下。
&通过USB将手机和电脑连接，打开手机上的USB调试
&如何开启USB调试？（Android手机型号众多，可能方式不太一样，这里以小米手机为例）
点击进入 &设置-&关于手机，连续点击几次MIUI版本，触发开发者模式。
进入 设置-&其他高级设置,就可以看到开发者选项了，在开发者选项里打开USB调试，之后弹出一个提示窗口，点击确定。
& & & & & && &&
这时在cmd命令行或Cygwin输入adb devices就可以看到设备已连接
运行RN项目时，手机和电脑USB连接并且电脑和手机设备在同一个Wifi网络环境下。
跟在模拟器运行时的方式差不多，在Cygwin输入npm start，接着再开一个窗口输入react-native &run-android。如果手机没有打开USB调试，则会报异常。
&部署成功如下图所示:
在真机上运行时可能会遇到白屏的情况，请找到并开启悬浮窗权限。比如小米系统的
设置-&其他应用管理-&(项目名:Myproject)-&权限管理-&显示悬浮窗
重新打开项目时会出现如下:
让调试用电脑和你的手机必须处于相同的 WiFi 网络中下
1.摇晃手机（也可以按menu键，不过现在较新版的手机已经去除这个键了）
2.点击Dev Settings
3.点击Debug server host&port for devices
&&输入 ip地址:端口号， 如10.10.10.133:8081
&&Ip地址根据本机而定，端口号固定为8081
4.点击Reload JS
最终进入到RN项目的主页了
以后再运行项目时，可不必用USB连接。直接先在命令行输入npm start，接着在手机的项目上点击Reload JS就可以了，前提是手机和电脑需使用同一wifi。（Android&5.0以上及更高版本，可以使用adb reverse命令连接，命令行运行
&&&&db reverse tcp:8081 tcp:8081Hi，老师好我是android原生开发者，最近在学习 React Native 这门技术遇到的问题是
在小米NOTE （android 4.4.4）真机上直接运行生成的React Native Demo，页面是空白，而且长按菜单键也没有反应，编译成功，并没有任何报错信息。同样的代码考入 Genymotion
(android 4.2.2) 上，可以正常显示。这个问题有没有解决方案？如何确定是手机问题还是框架问题？通过 bugreport可以看出具体原因吗？
问题解决了，1.把应用的悬浮框权限开启2.在手机上设置local ip和端口地址，才可以把js等资源下载到手机上进行调试。
特地注册来回复下，看了你这个贴子解决了问题。
React Native 快速...关于React Native安卓应用调试，我遇到的那些坑 - 简书
关于React Native安卓应用调试，我遇到的那些坑
上周开始尝试使用React Native开发app，在安卓调试环境上踩了不少坑，花费了不少时间。在这里总结一下，希望大家见到同样那些坑之后可以绕道而行。首先说明，我是在Mac上进行开发和调试的，因此使用其他系统的同学们参考时请自行斟酌。1）关于Android虚拟机的选择RN官方推荐Genymotion，也确实比较好用，不过，我遇到的第一个坑也是从此开始的。在创建虚拟机时，建议你目前不要采用Preview版本的Nexus 5X和6P，其中存在一些bug会导致调试报错，我花了一天多的时间都没搞定，后来选择Nexus 5的稳定版本后非常顺利就通过了。
安卓官方的虚拟机也是可以选择的，只是界面有点儿简陋，我没有找到如何缩放虚拟机界面的解决办法，所以放弃了。2）调试中的界面刷新问题使用RN开发的一大优势就是修改app中的Javascript代码时无需重新编译应用，但是在Genymotion虚拟机中，按照官方的提示按 Command+M 却无法唤出开发菜单，这个在Genymotion中的解决办法是：按照如下图所示，拖动虚拟机右侧的功能分隔线，让几个操作按钮出现在虚拟机右侧，这时再按 Command+M 即可顺利唤出开发菜单。
我在使用安卓官方的虚拟机时也遇到了刷新的问题，按F2键无法唤出开发菜单，不过通过命令行输入：adb shell input keyevent 82 还是可以解决这个问题。3）安卓真机调试中遇到的问题真机调试其实挺简单，首先用USB线将手机与电脑连接，并确保手机的usb调试选项打开，此时在项目根目录下运行：react-native run-android，即可在手机上进行调试。只要晃动手机，即可打开开发者菜单。如果需要通过Wifi连接开发服务器，调试时很常见会遇到“Unable to download JS bundle”的错误，这时的解决办法是：首先确保手机和电脑在同一wifi环境下在程序主界面，晃动手机，点击dev settings点击最后一项：Debug server host for device在其中设置电脑的IP和端口，比如 192.168.1.101:8081，然后重新加载JS还有人给出了一些其他的解决方案，不过我没有用上。4）关于8081端口占用的问题如果你同时开发安卓和iOS应用，或者有时在不同的应用之间进行切换，编译时可能会遇到端口8081被占用的问题，这时可以运行：lsof -n -i4TCP:8081，检查端口的使用情况，必要时可以通过：kill -9 &端口号&，杀死当前占用8081端口的进程。先写这么多，想到其他的再更新。另外我建议在操作时尽量参考React Native官方的文档及比较标准的中文翻译，按部就班的进行，遇到问题再Google搜索解决方案，而不要一开始就依赖一些快速上手类的文章。看Facebook是如何优化React Native性能 - 安卓 - 伯乐在线
& 看Facebook是如何优化React Native性能
该文章翻译自Facebook官方博客，
React Native 允许我们运用 React 和 Relay 提供的声明式的编程模型，写JavaScript来构建我们的 iOS 和 Android 的应用。这样的做法使得我们的代码更精简，更容易理解和阅读，这些代码还可以在多个平台共享。我们也可以加快迭代速度（因为在开发时不用等待漫长的编译。使用React Native，我们可以发布更快，打磨更多细节，让应用运行的更流畅。这其中优化性能是我们工作的一大重要部分，接下来讲述 Facebook 如何使应用性能足足提升两倍的故事~
为什么要加快?
当应用运行的更快，内容加载的更迅速，就意味着用户可以有更多时间来使用应用，流畅的动画让用户更加享受的使用应用。在新型市场中，2G网络和几年前的机型还是主力。这时那些性能良好的和那些运行卡顿就有很大差别了。
自从发布了 iOS 和 Android 版本的 React Native 后，我们团队一直在诸如 提升列表视图的滚动性能，优化内存占有，让 UI 界面更具响应性和加快应用启动速度 上做了不少工作。这其中应用启动关乎初次印象和是框架其他部分的压力源头，所以它是要解决的头等难题。
我们把Facebook的iOS版中的事件主页用RN重新实现（在更多标签页下点击事件进入查看）。这是个非常好的用于测试性能的例子，因为原生版已经做了大量的优化工作，而且该页面也是非常好的典型列表交互的例子。
接下来，我们自动化的 CT-Scan 性能测试来帮助我们自动定位到我们需要到的标签页。然后反复打开和关闭事件主页50次。在每次交互中，我们能够记录下从点击事件按钮到事件主页能够被完整显示的时间，我们也添加更多详细的性能埋点来告诉我们启动过程哪些步骤是缓慢或消耗CPU的
下面是我们记录和测量的一些步骤的大致描述：
1 原生启动：初始化JavaScript虚拟机和其他一些原生模块（如磁盘缓存，网络，UI管理器等）
2 JS初始化和依赖加载：从手机存储中读取被压缩的JS代码，加载到JavaScript虚拟机，从而解析和产生字节码，加载相关的依赖
3 取数据前：加载和执行事件主页的应用代码，构建Relay的查询语句，然后触发取数据。
4 取数据：从手机磁盘缓存读取数据
5 JS渲染：初始化所有相关的React组件，把它们发送到原生的UI管理器模块来显示。
6 原生渲染：在shadow线程中先通过根据 FlexBox 布局计算视图大小。然后在主线程中创建和定位这些视图。
我们根据于此的黄金法则是：永远不要忘了回归测试。我们持续的运行它来追踪性能提升和功能回归。开发者在提交改动的代码之前用它对特定的提交做运行和详细的性能分析。其他的一些测试也需要被同样的方式建立来衡量诸如功能性能和内存使用等
启动时发生了什么
当我们设置好自动性能追踪，我们需要一个工具来给我们更多细节来决定启动过程中的那些部分需要优化。我们在我们框架里添加详细的启动/暂停的性能锚点，收集数据，使用 catapult 查看器来定位热点和阻塞线程间交互的。也可以从开发者菜单下触发开始对我们应用的性能分析。
在RN中，代码是在JavaScript线程中执行的。每次你要写数据到磁盘，在一次网络请求，或者取一些其他原生的资源（如摄像机），你的代码都需要调用原生模块。当你要渲染力你的 React 组件，它们会被转发到界面管理器的原生模块中，它在主线程中来执行布局和创建相应的视图。桥协议来转发请求到原生模块和被回调到你的JS代码（如果需要）。在RN中，所有原生的调用必须是异步的来避免阻塞主线程和JS线程。
在下面的事件组件的启动可视化图中，我们可以看到应用在 JS 队列中运行，为了显示事件列表，触发了相关的缓存读取（在本地存储队列中被异步触发）。一旦它取得了缓存数据，应用在 JS 队列用 React 渲染事件单元格，接着又传给栅格队列来布局和最终传给主队列来创建视图显示。这个例子展示了多个缓存读取（组合成单个常用读取操作可以做到更快）和一些React在JS线程上的渲染操作可以被统一合并。
下面是那些我们在实施过程中最重要的性能和时序安排的提升做法，同时配有对应代码提交的链接。
启动时少做些
：清理掉那些在require时执行的多余逻辑和代码，那些事为了网站准备而不是 RN
：不像编译代码，在发布模式下 JS 不需要用来去除debug特性的预处理器。使用 Babel 的转换函数，我们可以剔除那些在 DEV 语句下方的代码，来有效的减少要打包的代码量，从而节省 JavaScript 解析时间。
在服务器端生成事件描述
安排合适时机执行
：Relay一开始是web项目而生所以仅仅把请求响应放在内存中 – 要从磁盘读取的第一个请求的缓存响应需要从磁盘中读取全部的缓存到内存中。通过只读取满足特定查询请求的缓存，我们可以显著减少 I/O 负载和原生到JS桥的流量。
：一开始我们认为通过把JS请求批量发送给原生模块可以减少调用原生到JS桥的负载，但是性能分析告诉我们JS和原生间的桥调用根本不是性能瓶颈。事实上，UI界面或缓存读取的批量操作的延迟也会延迟原生线程的操作，从而影响应用性能。在其他case上，注入Relay用于拉取多个键值数据的缓存读取，通过批处理可以有显著提升。
：绑定触摸事件回调会需要不少时间。所以我们现在仅仅先绑定触摸开始事件touch down event（就是当你第一次触摸对象时）然后只当你触摸对象后才开始绑定其他回调函数，而不是一开始就全部绑定对调
延迟流行事件的查询：
为光速做准备
几个月前，事件主页的启动在 iPhone5 上需要2秒。经过我们在RN上的大量性能优化工作，在伦敦，门洛帕克和纽约的RN，React和Relay团队，事件主页的启动被加快了一倍。而且大部分我们实施的优化是在RN的框架层的，这就意味着开发者们的RN应用也会自动得益于这些工作（当他们把应用迁移到最新版本的RN下
这些优化才仅仅是个开始：我们会继续在整个栈的各个部分都开展工作，从JavaScript代码解析时间到数据拉取性能。同时，你们也可以，学习，在提出你可能遇到的任何问题。
可能感兴趣的话题
关于安卓频道
安卓频道分享Android开发文章，精选工具和安卓相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线}