文档章节

在Windows下搭建React Native Android开发环境

jackzlz
 jackzlz
发布于 2015/09/18 17:24
字数 1158
阅读 45516
收藏 40
点赞 7
评论 30

安装JDK

Java官网下载JDK并安装。请注意选择x86还是x64版本。

推荐将JDK的bin目录加入系统PATH环境变量。

安装Android SDK

可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。

为了加速下载,推荐从AndroidDevTools下载。

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

  • Tools/Android SDK Tools (24.3.3)

  • Tools/Android SDK Platform-tools (22)

  • Tools/Android SDK Build-tools (23.0.1)

  • Android 6.0 (API 23)/SDK Platform (1)

  • Extras/Android Support Library(23.0.1)

推荐使用腾讯Bugly的镜像加速下载。查看说明

推荐将SDK的platform-tools子目录加入系统PATH环境变量。

安装C++环境

推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

安装node.js

官网下载node.js的官方4.1版本或更高版本。

安装react-native命令行工具

官方的安装方法是

npm install -g react-native-cli

但是由于npm上的版本在windows下存在BUG,因此需要安装github上的master支线,否则会在下一步骤报以下错误:

This will walk you through creating a new React Native project in *** events.js:141       throw er; // Unhandled 'error' event       ^ Error: spawn npm ENOENT     at exports._errnoException (util.js:837:11)     at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)     at onErrorNT (internal/child_process.js:344:16)     at doNTCallback2 (node.js:429:9)     at process._tickCallback (node.js:343:17)     at Function.Module.runMain (module.js:477:11)     at startup (node.js:117:18)     at node.js:951:3

如果您看到本文时0.12已经发布,那很可能直接输入上面的命令就行了。如果0.12还没有发布,请进行以下步骤:

React Native的Github页面右侧点击Download ZIP,下载后解压,并执行以下代码:

cd **解压的目录** cd react-native-cli npm install -g

创建项目

进入你的工作目录,运行

react-native init MyProject

并耐心等待数分钟。

运行packager

首先要修复package在windows下的两处BUG。

1、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.js的getName()方法中,将

return path.join(name, path.relative(p.root, this.path));

修改为

return path.join(name, path.relative(p.root, this.path)).replace(/\\/g, '/');

注意,如果你在修改此行代码之前运行过packager,那你可能需要去C:\Users\你的用户名\AppData\Local\Temp中找到并删除所有 react-packager-cache 开头的文件。

2、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js的_resolveNodeDependency(fromModule, toModuleName)方法中,将

for (let currDir = path.dirname(fromModule.path);                 currDir !== '/';                 currDir = path.dirname(currDir)) {

修改为

for (let currDir = path.dirname(fromModule.path);                 path.dirname(currDir) != currDir;                 currDir = path.dirname(currDir)) {

随后可以运行packager。

如果你有cygwin,可以在cygwin环境中进入工程目录,运行

npm start

如果没有cygwin或不在cygwin环境中,可以进入工程目录,运行

node node_modules\react-native\packager\packager.js

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。如果迟迟看不到进度条,请检查上面的修改是否已经做到。

运行模拟器

推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。

如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。

安卓运行

保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

如果apk安装运行出现报错,请检查platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

至此,应该能看到APP运行,并报错 Unable to download JS bundle

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的局域网IP,再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

安卓调试

目前Windows下无法自动打开chrome进行调试,所以手动打开chrome,访问如下地址:http://localhost:8081/debugger-ui 即可。


=====================================================================

已按该教程搭建完成。以下是截图


本文转载自:http://reactnativecn.github.io/tutorials/2015/09/16/react-native-android-on-windows.html

共有 人打赏支持
jackzlz
粉丝 18
博文 22
码字总数 9645
作品 0
深圳
程序员
加载中

评论(30)

Amin_
Amin_

引用来自“iceStone”的评论

启动过后白屏的情况有遇到过吗

引用来自“睡着的兔子”的评论

我遇到了,你解决了吗?

引用来自“lentg”的评论

你的白屏问题解决了吗? Starting the app (C:\Users\ls\AppData\Local\Android\sdk/platform-tools/adb shell am start -n com.oopi/.MainActivity)... open: Permission denied open: Permission denied Starting: Intent { cmp=com.oopi/.MainActivity }

引用来自“niuky”的评论

我也碰到白屏了!请问你怎么解决的!
那个是因为悬浮窗的权限没有开,找到控制引用权限的地方,开了app的悬浮窗权限就好了
xsgkaka
xsgkaka

引用来自“flashback”的评论

执行 npm start 后报错如下,请指教,谢谢

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! reactNative@0.0.1 start: `node_modules/react-native/packager/packager.s h`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactNative@0.0.1 start script 'node_modules/react-native /packager/packager.sh'.
npm ERR! This is most likely a problem with the reactNative package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node_modules/react-native/packager/packager.sh
npm ERR! You can get their info via:
npm ERR! npm owner
试一试 npm i start
niuky
niuky

引用来自“iceStone”的评论

启动过后白屏的情况有遇到过吗

引用来自“睡着的兔子”的评论

我遇到了,你解决了吗?

引用来自“lentg”的评论

你的白屏问题解决了吗? Starting the app (C:\Users\ls\AppData\Local\Android\sdk/platform-tools/adb shell am start -n com.oopi/.MainActivity)... open: Permission denied open: Permission denied Starting: Intent { cmp=com.oopi/.MainActivity }
我也碰到白屏了!请问你怎么解决的!
chenyu10086
chenyu10086

引用来自“紫川望月”的评论

react-native init MyProject失败

引用来自“jackzlz”的评论

有具体错误信息吗?
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
chenyu10086
chenyu10086

引用来自“tkggusraqk”的评论

大神按照你的步骤不行呀

引用来自“jackzlz”的评论

我这边博客也是转载的。我按照博客的步骤成功在安卓手机运行了示例app(见文章最后截图)。请问你是哪一步没有成功?
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
chenyu10086
chenyu10086

引用来自“tkggusraqk”的评论

大神按照你的步骤不行呀
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
chenyu10086
chenyu10086

引用来自“tkggusraqk”的评论

大神按照你的步骤不行呀
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
chenyu10086
chenyu10086

引用来自“iceStone”的评论

启动过后白屏的情况有遇到过吗
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
chenyu10086
chenyu10086

引用来自“flashback”的评论

执行 npm start 后报错如下,请指教,谢谢

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! reactNative@0.0.1 start: `node_modules/react-native/packager/packager.s h`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactNative@0.0.1 start script 'node_modules/react-native /packager/packager.sh'.
npm ERR! This is most likely a problem with the reactNative package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node_modules/react-native/packager/packager.sh
npm ERR! You can get their info via:
npm ERR! npm owner
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
chenyu10086
chenyu10086

引用来自“紫川望月”的评论

react-native init MyProject失败

引用来自“jackzlz”的评论

有具体错误信息吗?

引用来自“紫川望月”的评论

解决了,是找不到git,把git路径加入到path环境变量里就好了
http://blog.csdn.net/u011068702/article/details/49448043 Android之Windows下搭建React Native Android开发环境(差不多搞了一天) 这是我的文章,里面的每一步都有图,而且错误都总结了,比这个详细多了,去了绝对让你不后悔
一步一步在Windows下搭建React Native Android开发环境

执行上句命令后打开下面这个连接 http://localhost:8081/index.android.bundle?platform=android 页面如图上: 这个页面的说明android项目没有编译成功 需要删除项目(MyProject)下的这个路径...

陈映亮
2017/10/19
0
0
windows配置react-native 开发环境(开发android版本)

新到的公司用的window系统,要开发react-native,没办法,只好一步步开始配置其开发环境。 安装node环境,https://nodejs.org/zh-cn/ 官网下载即可。 安装react-native-cli, 这里没有强制用...

前端大白
07/10
0
0
React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao
05/18
0
0
react-native下遇到的坑,在这里都可以解决

React-Native android在windows下的踩坑记 坑很多,跳之前做好准备。没有VPN的同学请浏览完本文后慎行。 你需要先安装最新版本的node.js(我最后使用的是v4.1.2),前往官网下载>> 注:我win...

hqxluoyang
2015/10/27
0
0
React Native开发之——Webstorm快捷开发

前言 开发RN的工具有很多,选择性也比较多,常见的有: WebStorm Sublime Text 3 VS Code Nuclide 其他 本文以Webstorm为例讲解 使用Webstorm开发React Native 注:本文默认已配置好React N...

青衫无名
07/16
0
0
React Native在Android当中实践(五)——常见问题

React Native在Android当中实践(一)——背景介绍 React Native在Android当中实践(二)——搭建开发环境 React Native在Android当中实践(三)——集成到Android项目当中 React Native在A...

YangZC
05/28
0
0
React-Native 之 环境配置和简单使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在...

postdep
05/01
0
0
ReactNative环境搭建问题小札

直接进入正题... ----------win7系统 + android studio工具 按照reactnative的官方介绍搭建开发环境 - React Native 中文网,使用Chocolatey,简单方便一些,但是会有一些小问题,不是因为...

害虫_84f3
05/23
0
0
React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown error: not all success patterns were matched. It means that "react-native run-andro......

bill1987610
05/31
0
0
React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown error: not all success patterns were matched. It means that "react-native run-andro......

bill1987610
05/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring基础

Spring是什么? Spring是一个开源框架,最早由Rod Johnson创建,它解决的是业务逻辑层和其他各层的松耦合问题。 经过十几年的发展,Spring正在扩展其他的领域,如:移动开发、社交API集成、N...

这很耳东先生
8分钟前
0
0
面试系列-40个Java多线程问题总结

前言 这篇文章主要是对多线程的问题进行总结的,因此罗列了40个多线程的问题。 这些多线程的问题,有些来源于各大网站、有些来源于自己的思考。可能有些问题网上有、可能有些问题对应的答案也...

Ryan-瑞恩
21分钟前
0
0
微信分享的细节

分享的缩略图要求: 一、图片大小小于32k 二、图片的尺寸为 宽度 :128px 高度:128px 分享title 和 description 出现金额等 以上情况存在会导致触发分享按钮 但是页面没有反应...

Js_Mei
27分钟前
0
0
【2018.07.23学习笔记】【linux高级知识 Shell脚本编程练习】

1、编写shell脚本,计算1-100的和; #!/bin/bashsum=0for i in `seq 1 100`do sum=$[$sum+$i]doneecho $sum 2、编写shell脚本,要求输入一个数字,然后计算出从1到输入数字的和,要求...

lgsxp
30分钟前
0
0
xss攻防浅谈

导读 XSS (Cross-Site Script) 攻击又叫跨站脚本攻击, 本质是一种注入攻击. 其原理, 简单的说就是利用各种手段把恶意代码添加到网页中, 并让受害者执行这段脚本. XSS能做用户使用浏览器能做的...

吴伟祥
30分钟前
0
0
js回调的一次应用

function hideBtn(option) { if (option == 1) { $("#addBtn").hide(); $("#addSonBtn").hide(); }}$("body").on("click", "#selectBtn", function () {......

晨猫
36分钟前
0
0
C++_读写ini配置文件

1.WritePrivateProfileString:写配置文件 WritePrivateProfileString 函数的定义形式为: BOOL WritePrivateProfileString(LPCTSTR lpAppName, LPCTSTR lpKeyName, LPCTSTR lpString, LPCTST......

一个小妞
36分钟前
0
0
通往阿里,BAT的50+经典Java面试题及答案解析(上)

Java是一个支持并发、基于类和面向对象的计算机编程语言。下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改。 代码复用。 增强代码的可靠性和灵活性。 增加代码的可理解性...

Java大蜗牛
36分钟前
1
0
数据库两大神器【索引和锁】

前言 只有光头才能变强 索引和锁在数据库中可以说是非常重要的知识点了,在面试中也会经常会被问到的。 本文力求简单讲清每个知识点,希望大家看完能有所收获 声明:如果没有说明具体的数据库...

Java3y
40分钟前
0
0
Application Express安装

Application Express安装文档 数据库选择和安装 数据库选择 Oracle建议直接12.2.0.1.0及以上的版本,12.1存在20618595bug(具体可参见官方文档) Oracle 12c 中安装oracle application expr...

youfen
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部