React-Native android在windows下的踩坑记
坑很多,跳之前做好准备。没有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下的踩坑记的更多相关文章
- Faster_Rcnn在windows下运行踩坑总结
Faster_Rcnn在windows下运行踩坑总结 20190524 今天又是元气满满的一天! 1.代码下载 2.编译 3.下载数据集 4.下载pre-train Model 5.运行train ...
- React Native初试:Windows下Andriod环境搭建
最近想写个App,又觉得Native App 太无趣了Web App又没那么成熟然后发现了Facebook在9月发布的React Native比较新奇,所以决定捣鼓看看: React Native为F ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- React Native Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
- Windows 10 & React Native & Android
Windows 10 & React Native & Android https://facebook.github.io/react-native/docs/getting-sta ...
- React Native Android 环境搭建
因为工作需要,最近正在学习React Native Android.温故而知新,把学习的内容记录下来巩固一下知识,也给有需要的人一些帮助. 需要说明的是,我刚接触React Native也不久,对它的 ...
- Android学习——windows下搭建NDK_r9环境
1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...
- React native android 最常见的10个问题
这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
随机推荐
- Python 字符串操作及string模块使用
python的字符串操作通过2部分的方法函数基本上就可以解决所有的字符串操作需求: python的字符串属性函数 python的string模块 1.字符串属性方法操作: 1.>字符串格式输出对 ...
- win32 disk imager使用后u盘容量恢复
XP下进入CMD命令窗体,Vista及7下右键以管理员方式运行DOS窗体 输入DISKPART,会显示计算机名,及DISKPART>命令行 在此状态下输入LIST DISK查看机器磁盘,正常Di ...
- [原创]Linq to xml增删改查Linq 入门篇:分分钟带你遨游Linq to xml的世界
本文原始作者博客 http://www.cnblogs.com/toutou Linq 入门篇(一):分分钟带你遨游linq to xml的世界 本文原创来自博客园 请叫我头头哥的博客, 请尊重版权, ...
- JavaScript类型判断instanceof与typeof对比
经常有人会在JavaScript里写如下的方法: function checkType() { var s1 = 123; var s2 = "OK"; if (s1 instan ...
- Unix目录结构的来历
作者: 阮一峰 Unix(包含Linux)的初学者,常常会很困惑,不明白目录结构的含义何在. 举例来说,根目录下面有一个子目录/bin,用于存放二进制程序.但是,/usr子目录下面还有/usr/bin ...
- C和指针 第十二章 使用结构和指针
链表是一种常用的数据结构,每个节点通过链或者指针链接在一起,程序通过间接指针访问链表中的节点. typedef struct Node { //指向下一个节点的指针 struct Node *next ...
- ecshop二次开发常用代码
通过index控制循环次数.在循环中将index作为if的判断条件,对循环进行控制.这里index是从0开始的.如果index<2,会进行两次循环. <!--{foreach from=$ ...
- JQ图片轮播
<script src="{staticurl action="jquery.js" type="js"}"></scri ...
- 基于Z-WAVE 协议的LED智能照明系统的研究笔记
LED调光基础: ☆:LED照明调光控制信号的方式有两种: 1. 通过PWM信号控制LED灯具开关电源的占空比从而实现调光: 2. 通过调光控制信号和交流电源供电线合用的两线式或三线式(例如LED相控 ...
- IIS跳转html页面自动识别是PC端还是手机端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...