react native window下的环境搭建和调试方案
这几天使用react native开发app,遇到一些坑,先记录下来,以后再继续补充
环境搭建
打开react native中文网,发现环境搭建特么也太复杂了,安装各种插件/软件,对于我们 编辑器+浏览器 就能搞事情 的前端开发人员来说,确实有些蛋疼,特别是有些包还需要科学上网,甚至科学上网也下不下的时候。

那么,可不可以不按照它指定的搭建方式去搭建,经过尝试,完全可以不用安装那么多东西。下面开始我的简单版环境搭建
安装java jdk / android sdk / 配置环境变量 / 链接手机运行。
详细说明:
1/ 首先需要有node ,然后通过 npm install react-native-cli -g 全局安装 react-native
找个文件夹 初始化一个项目 react-native init AwesomeProject
2/ 安装java jdk,并配置环境变量 (参考这个帖子)
3/ 安装android sdk
由于科学上网的关系,国内好多安装方法都无法访问google,这里给大家提供一个简单的android sdk包
链接:http://pan.baidu.com/s/1hrWgZwK 密码:6m70
下载解压后,配置环境变量(参考这个帖子)
在压缩包中双击sdk manager.exe,当然点一下可能不行,就多点几下,弹出窗口中选择最新的sdk tools platform-tools build-tools 点击install(由于网络问题,需要多试几次)

4/ 然后链接手机,手机打开开发中调试,在电脑的项目文件夹打开命令行,运行 react-native run-android,就可以慢慢打包了,耐心等待,开始的时候下载gradle会特别慢,不要紧,耐心等待,或者去这里下载,https://services.gradle.org/distributions/ ,

运行到这里,在手机上就装好了。

注:如果到此步没有打包成功,提示缺乏licenses,则可以创建要给xxx.bat文件,贴入如下代码,然后点击运行以下,应该就可以了。
mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"
以后就真机调试就好啦,在menu菜单中选择 debug js remotely,就会自动在chrome浏览器打开控制台调试,很方便
菜单如下

一般在打开app的情况下摇一摇就出menu ,如果没有的话,就在电脑命令行输入
,就会在手机端弹出菜单。
补充:在菜单中可以选上 live roload 和hot reloading ,这样当修改完成代码,就可以自动热更新了。(有时热更新不管用,就需要reload或者直接重新打包安装)
热更新需要配置 端口,在dev settings中选择debug server ,在弹窗中输入 电脑ip地址:8081,就Ok了。



完!
react native window下的环境搭建和调试方案的更多相关文章
- 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...
- android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...
- Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 具体图文解说
版权声明:本博客全部文章均为原创.欢迎交流.欢迎转载:转载请勿篡改内容,而且注明出处,谢谢! https://blog.csdn.net/waldmer/article/details/3272500 ...
- React Native在window下的环境搭建(二):创建新项目
React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...
- React Native在window下的环境搭建(一)
React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件 ...
- window下lamp环境搭建
软件: apache_2.2.25.msi php-5.4.30-Win32-VC9-x86.zip mysql-5.6.11-win32.msi下载地址:http://download.csdn.n ...
- React Native从零到一搭建开发环境
React Native从零到一搭建开发环境 ReactNative环境搭建 安装Homebrew 安装rvm 安装nvm 安装node 安装react-native-cli 安装watchman i ...
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
随机推荐
- JDK及JRE中bin工具说明
jre/bin工具说明:javac:Java编译器,将Java源代码换成字节代 java:Java解释器,直接从类文件执行Java应用程序代码 appletviewer(小程序浏览器):一种执行HTM ...
- Chrome浏览器video样式控制-隐藏下载按钮
Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...
- OC 导入类 #import和@class 区别复习
objective-c中#import和@class的区别 在Objective-C中,可以使用#import和@class来引用别的类型, 但是你知道两者有什么区别吗? @class叫做forwar ...
- ZigBee和Z-Wave的区别与未来
http://tech.c114.net/164/a702667.html ZigBee和Z-Wave短距离无线技术都用于远程监控和控制,但两种技术的规格和应用却不同.在美国应用越来越广泛的家庭局域网 ...
- mogodb优化
http://snoopyxdy.blog.163.com/blog/static/6011744020157511536993/ http://www.csdn.net/article/2012-1 ...
- 安装VS组件提示“所选驱动不再有效。继续安装之前,请先检查安装路径的设置。”要怎么办?
电脑里面原来装了VS2010,包括的组件有VB和C++,现在想添加C#,结果安装的时候就提示“所选驱动不再有效.继续安装之前,请先检查安装路径的设置”,安装路径在C盘,还有40个G,不知道该怎么办? ...
- 关于textiled的设置透明度的问题
如果textfield的背景色设置的是黑色的话, 然后设置它的透明度为0.3, 就会显示出半透明的效果, 这时如果用键盘输入时, 会显示不出来输入的字体. 因为: textfield的字体默认也是黑色 ...
- ipad2 wifi ios7.x 1.0.1还是无法越狱
原话: Warning! We have reports that the iPad 2 (wifi) is not yet compatible with the jailbreak and wil ...
- 3D 坐标变换 公式 推导
[ 更新 ]更好的方法见[用抽象代数讨论仿射变换和仿射空间中的坐标变换] ,以下是之前的内容. 以下的推导 结论是正确的,可是过程有点懵. 以下使用行向量: e1=(1,0,0) e2=(0,1,0) ...
- Spring核心之IoC——依赖注入
在J2EE开发平台中,Spring是一种优秀的轻量级企业应用解决方案.Spring倡导一切从实际出发,它的核心技术就是IOC(控制反转)和AOP(面向切面编程)技术.本文用的Spring版本为spri ...