react-native环境搭建
目标平台 Android
开发平台 windows
开发环境安装建议:由于开发环境存在差异,建议参照react官网 或者react中文网 安装,
react-native —— 在Windows下搭建React Native Android开发环境也很有参考价值。
安装过程中遇到错误后,查找关键字,解决错误。
开始!
安装:
Chocolatey
CMD.exe
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
安装需要一个稳定的能够翻墙的网络环境
上面错误显示window不能够解压.zip, 实际情况是更换一个稳定翻墙环境就解决了
win8 安装程序时出现2502 2503错误解决方法
- 运行CMD(必须用管理员权限)
- 输入命令: msiexec /package “你的安装文件的全路径”
参考:win8 安装程序时出现2502 2503错误解决方法
react-native init awesome
初始化项目,很长时间都显示进行中或者失败
解决方案:参考在Windows下搭建React Native Android开发环境
// 直接克隆主分支
git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli && npm install -g
当执行npm install -g
报错 'Error: EPERM: operation not permitted'
Error: EPERM: operation not permitted
显示权限不足,需要获取管理员权限,再次执行
获取管理员权限后,仍是报同样的错误。解决方案参考
How to fix Node.js npm permission problems
第一步:执行npm cache clean;再次在react-native-cli
目录下执行npm install -g
;如果不成功,
第二步:查看%APPDATA%\npm-cache
或者$env:APPDATA\npm-cache
。 不清楚这是什么意思,
第三步:第二部清理缓存后,如果还有残留,手动清除。问题解决。
第二步执行过程中,之前运行的react-native init awesome已经初始化成功,没有接着往下试
执行react-native init awesome
,初始化项目成功后,会看到
接着选择运行的平台:
如果是IOS:
cd E:\react\awesome
react-native run-ios
或者如上提示
如果是 Android:
cd E:\react\awesome
react-native run-andriod // 执行这一步的时候报错,-bash: XXXX/react-native: No such file or directory
-bash: XXXX/react-native: No such file or directory
执行react-native run-andriod 报错,显示文件不存在
方案:重新获取管理员权限,执行 npm install -g react-native-cli 。再次 react-native run-andriod
,完美运行。
Execution failed for task ':app:compileDebugJavaWithJavac'.
Could not find tools.jar
参考:
android - Execution failed for task ':app:compileDebugJavaWithJavac'
jdk环境变量配置
错误的原因是没有安装java SDK.官网选择下载对应的SDK。安装即可。
注意:自定义安装后,自定义路径下面下的是jre
,比如,我自定义安装路径为F:\ProgramFiles\java\jre1.8.0_111
,java\jre1.8.0_111
是默认安装路径的字段,照搬过来。安装成功后,
JDK
被放在了C:\Program Files\Java\jdk1.8.0_111
目录下面。
安装成功后,需要设置环境变量。[查看原文]
右击“我的电脑”=》"system"=》“advanced system setting”=》“environment variable”
1)在系统变量里新建JAVA_HOME变量,变量值为:C:\Program Files\Java\jdk1.8.0_111(根据自己的安装路径填写)
2)新建classpath变量,变量值为:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
3)在path变量(已存在不用新建)添加变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin(注意变量值之间用“;”隔开)
4)“开始”-->“运行”-->输入“javac”-->"Enter",如果能正常打印用法说明配置成功!
补充环境变量:
JAVA_HOME:jdk的安装路径
classpath:java加载类路径,只有类在classpath中java命令才能识别,在路径前加了个"."表示当前路径。
path:系统在任何路径下都可以识别java,javac命令
如何创建一个安卓模拟器
如何启动一个模拟器
参考:android 命令行模式启动模拟器
创建模拟器后,键入android list avd
查看可用的虚拟设备
emulator avd
启动模拟器
Execution failed for task ':app:installDebug'.com.android.builder.testing.api.DeviceException:com.android.ddmlib.ShellComma ndUnresponsiveException
参考:React Native疑难点,问题深坑最强总结帖(不断更新中)文中13和16两点
官网:troubleshooting。官网页面就有记录这个错误以及解决方案。·__·
根据官网的提示:该错误的原因是版本级别不对,需要将1.3.1版本降级为 1.2.3
- 需要将 android/build.gradle 里的 gradle:1.3.1 改为 gradle:1.2.3
- 需要将 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改为gradle-2.2-all.zip
再次报错:Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: java.lang.RuntimeException: No connected devices!
在 react packager中报错,报错的原因是设备没有成功连接
尝试解决方案:
- 启动avd manager,添加虚拟设备。
最终解决方案
启动genymotion setting
=> ADB
选择 "use custom android SDK tools", 复制黏贴sdk安装路径即可。
参考:Android Studio如何集成Genymotion,android studio中成功安装好genymotion插件后,重启android studio。
点击红色按钮,启动虚拟设备
命令行: avd devices
查看当前运行的全部模拟器,正确安装的话,就能看启动的设备
切换到awesome目录,react-native run-android
。成功!note2是通过use链接的真机
附录:
adb操作命令详解及大全
adb是什么?
adb的全称为Android Debug Bridge,就是起到调试桥的作用。通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具。adb的工作方式比较特殊,采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯,默认情况下adb会daemon相关的网络端口,所以当我们运行Eclipse时adb进程就会自动运行。
adb有什么用?:借助adb工具,我们可以管理设备或手机模拟器的状态。还可以进行很多手机操作,如安装软件、系统升级、运行shell命令等等。其实简而言说,adb就是连接Android手机与PC端的桥梁,可以让用户在电脑上对手机进行全面的操作
常见:
android list avd 系统中所有模拟器
adb devices 查看当前运行的所有模拟器
adb shell 进入设备的或模拟器的shell 模式
ctrl + d 退出adb shell模式
jdk与jre的区别
JDK就是Java Development Kit.面向开发人员,它提供了Java的开发环境和运行环境。
SDK是Software Development Kit 一般指软件开发包,可以包括函数库、编译程序等。
JRE是Java Runtime Enviroment是指Java的运行环境,是面向Java程序的使用者,而不是开发者。
JVM,java virtual machineJVM或java虚拟机,它是整个java实现跨平台的最核心的部分,所有的java程序会首先被编译为.class的类文件,这种类文件可以在虚拟机上执行,也就是说class并不直接与机器的操作系统相对应,而是经过虚拟机间接与操作系统交互,由虚拟机将程序解释给本地系统执行
史上最全Windows版本搭建安装React Native环境配置
React Native Android 踩坑之旅
待解决问题
- android studio 中avd manager为什么不能点击
react-native环境搭建的更多相关文章
- Ubuntu17.10 React Native 环境搭建
React Native 环境搭建 环境:ubuntu17.10 安装依赖 必须安装的依赖有:Node.React Native 命令行工具以及 JDK 和 Andriod Studio. 安装nod ...
- 初学 React native | 环境搭建(在模拟器上运行)
我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...
- React Native环境搭建以及几个基础控件的使用
之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...
- Mac系统下React Native环境搭建
这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...
- 逻辑性最强的React Native环境搭建与调试
React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用, ...
- react Native环境 搭建
react Native的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(ios和Android) 开发成本第 代码复用率高.windows环境搭建react Native开发环境1.安装 ...
- React Native 环境搭建踩坑
React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-nat ...
- React-Native(一):React Native环境搭建
第一步:安装jdk 从java官网下载jdk8 配置环境变量: JAVA_HOME:D:\Program Files\Java\jdk1.8.0_111 Path中追加:%JAVA_HOME%\bin ...
- react native环境搭建(含错误处理)
1. Python 2 注意,不要选择3.0及以上的,还不成熟 安装过程中一直 next就可以了,但是注意下图,勾选添加到系统环境变量 安装完之后cmd输入 python 查看是否安装成功. 补充 ...
- React Native环境搭建(iOS、Mac)
http://reactnative.cn/docs/0.42/getting-started.html#content 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装N ...
随机推荐
- three.js立方体
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ge ...
- 【转】Java提高篇(三四)-----fail-fast机制
转自:http://blog.csdn.net/chenssy/article/details/38151189 在JDK的Collection中我们时常会看到类似于这样的话: 例如 ...
- 队列的JS实现
队列和栈相似,都是对插入和删除操作的部位做了限制特殊的线性表.在队列中,只能从一头删除节点,这一头叫做队首:而另一端只能做插入操作,这一头叫做队尾.很容易理解,队列是一个"先进先出" ...
- Files 的值“<<<<<<< .mine”无效。路径中具有非法字符
解决冲突,告诉SVN这个问题已解决(Resolved). 一般更简单些:在你的工程OBJ/DEBUG目录下,找到 工程名.csproj.FileListAbsolute.txt的文件打开并删除含有'& ...
- Ubuntu创建桌面快捷方式
默认情况下,ubuntu会将自动安装的软件快捷方式保存在/usr/share/applications目录下,如果我们要创建桌面快捷方式,只需要右键-复制-桌面 就Ok,如图: 上面的方法是通过系统自 ...
- mina通信 demo
1,要用到4个jar 2,服务端 package mina.server; import java.io.IOException; import java.net.InetSocketAddress; ...
- pythonchallenge 解谜 Level 4
下一关... 一张图片,于是就点击了一下. 跳转到了 http://www.pythonchallenge.com/pc/def/linkedlist.php?nothing=12345 显示的是: ...
- if [ "$变量1"x = "$变量2"x ]中x的含义
问题:if [ "$变量1"x = "$变量2"x ]中x的含义是? 答:“x”字符可以为任意字符,用于防止变量为空时,某些版本的bash中会产生错误: 在一个 ...
- ThinkPHP5 与 ThinkPHP3.* 之间的使用差异
因为研究TP5时间不是很长,暂时先列以下几处差异: 1.过去的单字母函数已完全被替换掉,如下: S=>cache,C=>config,M/D=>model,U=>url,I=& ...
- ViewPager自动轮播
Android使用ViewPager实现左右循环滑动及轮播效果 ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...