坑很多,跳之前做好准备。没有VPN的同学请浏览完本文后慎行。

你需要先安装最新版本的node.js(我最后使用的是v4.1.2),前往官网下载>>

注:我win7已经安装过Visual Studio 2013和Android开发环境(也踩了不少坑,后面有截图)

为了方便切换npm源,需要先安装nrm模块

因为公司内把taobao全线屏蔽了,所以我用了cnpm的镜像

因为我之前电脑里安装了node的v0.12.7版本,所以我遇到了下面的坑

如果你也跟我一样启动的时候报错了,那么你需要升级node.js,直接到官网下载并安装,安装路径覆盖现有安装目录即可。官网上也提到node的最低版本要求

https://github.com/facebook/react-native

更新完node后

一切正常了,你可以在浏览器里访问:http://localhost:8081/index.android.bundle?platform=android

保留packager的dos窗口,新建另外一个dos窗口,切换至项目目录下:react-native run-android

报错了,你需要设置ANDROID_HOME的环境变量,跟JAVA_HOME类似的,这里直接略过了…

遇到这个错误,我是被坑了很久,说下过程。我尝试下载并安装Android Studio。 启动Android Studio后报错了

如果你也遇到此问题,可以参考这里解决:http://stackoverflow.com/questions/30044635/android-studio-v1-2-0-start-up-error-java-lang-nullpointerexception

最后启动Android Studio后,打开SDK Manager,设置镜像后,下载安装指定的SDK,参数下面这篇文章:

在Windows下搭建React Native开发环境 http://my.oschina.net/jackzlz/blog/508210

腾讯Bugly加速 http://android-mirror.bugly.qq.com:8080/include/usage.html

一切就绪,再次运行时遇到了这个问题

此时你需要开启VPN,静静等待好消息吧…

我连接的是真机,apk安装好之后,此时可能会遇到错误。我遇到的错误与这篇文章一样:http://www.cnblogs.com/unofficial/p/4843734.html

选择 Dev Settings,然后输入本机的IP地址

按上面文章的操作处理后,如果一直连不上,用PC上的浏览器访问一下地址http://localhost:8081/index.android.bundle?platform=android,浏览器能正常访问但手机访问时在packager的DOS窗口没有看到log输出,那么你可以尝试使用下面的命令:

参考网址:http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle

最后的最后,期待已久的界面出来了。

修改文字,然后重新载入JS,应用不需要重启,效果如下:

总体来说,按照网上的资料你是能一步一步解决问题的。我遇到的问题跟我之前安装的环境有问题,所以导致了一些问题,祝诸君都能顺利看到Welcome to React Native!界面

主要的几个命令:

1、初始化项目 react-native init projectName

2、dos进入项目文件夹之后 react-native start,启动服务

3、另外开启一个DOS窗口,启动应用:react-native run-android

------- update by 2015/11/30

使用最新版本的react-native(0.15.0),因为之前本机已经成功运行过react-native,再次按照上面的几个命令操作的时候,发现真机运行会报错:

ReferenceError: Can't find variable: require(line 1 the generated bundle)   github上也有链接 https://github.com/facebook/react-native/issues/3379

点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在windows下的踩坑记相关推荐

  1. mac macaca android,Mac使用自动化测试macaca踩坑记

    前言:QA介绍了一款自动化介绍框架,Macaca,但遇到一个问题,就是原生sample例子能跑起来,但自己的APP跑不起来,于是让我安装试一试,这一安装不要紧,安装过程中发现别人很简单顺利完成的安装过 ...

  2. CentOS7环境下MySQL踩坑记

    1.启动/配置/编码等问题 安装包放在opt目录下 安装:rpm -ivh rpm 软件名 如果安装时,与某个软件 xxx冲突,则需要将冲突的软件卸载掉: yum -y remove xxx 修改密码 ...

  3. React Native Android 应用层实战沦陷记

    [工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 一眨眼又一年快要过去了,原计划今年的最后一个小目标(React N ...

  4. Android之Windows下搭建React Native Android开发环境(差不多搞了一天)

    Android之Windows下搭建React Native Android开发环境               穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...

  5. React Native Android启动白屏的一种解决方案下

    React Native Android启动白屏的一种解决方案下 参考文章: (1)React Native Android启动白屏的一种解决方案下 (2)https://www.cnblogs.co ...

  6. React Native Android 从学车到补胎和成功发车经历

    [工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准 ...

  7. react native Android端保持APP后台运行--封装 Headless JS

    react native Android端保持APP后台运行--封装 Headless JS 前些日子在做后台下载时踩了后台运行这个大坑,RN官网文档上面在安卓上提供了Headless JS方法,iO ...

  8. React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)

    [工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 有了前面<React Native Android 从学车到 ...

  9. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

最新文章

  1. 如何快速融入团队并成为团队核心?(九)
  2. 斯坦福大学、DARPA与硅谷公司共同分析前沿科技发展趋势
  3. python3-Python3 数字(Number)
  4. DOS BAT批处理定义变量
  5. 安装和使用Oracle Instant Client 和 SQLPlus
  6. HTTP header中的 Cache-control
  7. python断言失败_python异常处理、断言
  8. [SHELL] LAMP一键安装脚本设计(v2.1)
  9. 伊对和连信交友相亲聊天平台靠谱吗?
  10. 全球股市币市同迎黑色一天 熊市持现金或是王道 | 链塔快评
  11. find命令的基础用法以及按文件修改时间查找文件
  12. 2048小游戏编写思路
  13. pytorch一小时速成
  14. 曲奇的ndnSIM API教程翻译 命名数据网络 NDN ndn simulator
  15. PyCharm下载插件失败解决方法
  16. 在Adobe Acrobat Pro调整PDF页面大小(使得页面一样大)
  17. java中StringTokenizer使用
  18. 华为笔记本linux usb启动,华为MateBook D(2018) BIOS设置u盘启动教程
  19. mysql定时任务 每日执行存储过程
  20. python pdf解密脚本(pikepdf模块)

热门文章

  1. cisco路由器EIGRP配置实例
  2. Java中如何实现序列化,有什么意义?
  3. Linux下Redis-3.0.7版本的安装以及Redis主备的部署(一)
  4. Error: No module named books
  5. Windows Phone7天初学(4):数据绑定
  6. buHdoZer‘s Arch
  7. c# BackgroundWorker组件介绍(属性、方法、事件)
  8. 如何部署云服务器,保证应用高可用性,永不停机
  9. 用Docker安装Gitlab
  10. JAVA字符串格式化-String.format()的使用