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

http://my.oschina.net/jackzlz/blog/508210

安装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版本或更高版本。

安装Python并配置环境变量

https://www.python.org/downloads/release/python-2711/

要配置环境变量,否则报错

D:\Workspace\ReactNative\Android>react-native init MyProject
This will walk you through creating a new React Native project in D:\Workspace\R
eactNative\Android\MyProject
Installing react-native package from npm...

> utf-8[email protected]1.2.1 install D:\Workspace\ReactNative\Android\MyProject\node_m
odules\react-native\node_modules\ws\node_modules\utf-8-validate
> node-gyp rebuild

D:\Workspace\ReactNative\Android\MyProject\node_modules\react-native\node_module
s\ws\node_modules\utf-8-validate>if not defined npm_config_node_gyp (node "D:\Pr
ogramFiles\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp
\bin\node-gyp.js" rebuild )  else (node  rebuild )

> [email protected]1.2.1 install D:\Workspace\ReactNative\Android\MyProject\node_modul
es\react-native\node_modules\ws\node_modules\bufferutil
> node-gyp rebuild

D:\Workspace\ReactNative\Android\MyProject\node_modules\react-native\node_module
s\ws\node_modules\bufferutil>if not defined npm_config_node_gyp (node "D:\Progra
mFiles\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin
\node-gyp.js" rebuild )  else (node  rebuild )

gyp ERR! configure error
gyp ERR! stack Error: Can‘t find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack     at failNoPython (D:\ProgramFiles\nodejs\node_modules\npm\node
_modules\node-gyp\lib\configure.js:116:14)
gyp ERR! stack     at D:\ProgramFiles\nodejs\node_modules\npm\node_modules\node-
gyp\lib\configure.js:71:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7600
gyp ERR! command "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\
\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd D:\Workspace\ReactNative\Android\MyProject\node_modules\react-nativ
e\node_modules\ws\node_modules\utf-8-validate
gyp ERR! node -v v4.2.6
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok
gyp ERR! configure error
gyp ERR! stack Error: Can‘t find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack     at failNoPython (D:\ProgramFiles\nodejs\node_modules\npm\node
_modules\node-gyp\lib\configure.js:116:14)
gyp ERR! stack     at D:\ProgramFiles\nodejs\node_modules\npm\node_modules\node-
gyp\lib\configure.js:71:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7600
gyp ERR! command "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\
\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd D:\Workspace\ReactNative\Android\MyProject\node_modules\react-nativ
e\node_modules\ws\node_modules\bufferutil
gyp ERR! node -v v4.2.6
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok
npm WARN optional dep failed, continuing utf-8[email protected]1.2.1
npm WARN optional dep failed, continuing [email protected]1.2.1

`npm install --save react-native` failed

D:\Workspace\ReactNative\Android>

安装react-native命令行工具

官方的安装方法是

npm install -g react-native-cli
C:\Users\WPWL>npm install -g react-native-cli
C:\Users\WPWL\AppData\Roaming\npm\react-native -> C:\Users\WPWL\AppData\Roamingnpm\node_modules\react-native-cli\index.js
react[email protected]0.1.10 C:\Users\WPWL\AppData\Roaming\npm\node_modules\react-nat
ive-cli
├── [email protected]5.1.0
├── [email protected]1.1.1 ([email protected]2.1.0, [email protected]2.0.0, escape-string-regex
[email protected]1.0.4, [email protected]2.0.0, [email protected]3.0.0)
└── [email protected]0.2.14 ([email protected]0.1.8, [email protected]0.3.1, [email protected]1.0.7, [email protected]0.8.
3, [email protected]0.2.1)

但是由于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 即可。

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

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

时间： 2024-12-24 23:13:59

【转】在Windows下搭建React Native Android开发环境的相关文章

手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的) react-native的GitHub地址:https://github.com/facebook/react-native react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html 1.

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

widows版本: win7 64位 专业版 1. 安装jdk.(我用的jdk7) 注意选择x86还是x64版本, 添加到系统PATH环境变量 2. 准备好android sdk 这个不多说,同时推荐使用android studio,模拟器推荐使用Genymotion,比自带的AVD要快很多. 3. 安装C++环境 可以直接安装Visual Studio 2013或2015,也可选择单独SDK,编译node.js的C++模块需要用. 4. 安装node.js 从官网下载node.js, 我下载的

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

安卓环境配置 安装JDK 安装完成后,使用命令行检查版本 java -version 安装Android Studio 以及SDK 下载AS和SDK,建议使用http://www.androiddevtools.cn/,这里整理得比较清晰,SDK下载可能要使用国内镜像,具体使用上面的网址有介绍. 这里需要注意设置环境变量ANDROID_HOME 1. 打开控制面板,选择系统和安全->系统->高级系统设置->高级->环境变量->新建,变量名填写ANDROID_HOME,变量值填

在Windows下搭建Cocos2d-X的Android开发环境

在前面的博客中介绍了搭建Windows下的Cocos2d-X开发环境和搭建Windows下的Android开发环境,今天介绍搭建Cocos2d-X下的Android开发环境 在搭建Cocos2d-X下的Android开发环境前,首先要搭建好Windows下的Cocos2d-X开发环境和Windows下的Android开发环境 如果没有搭建好这两个环境可以看本人的博客 搭建Windows下的Cocos2d-X开发环境:http://blog.csdn.net/u010105970/article/

react-native —— 在Mac上搭建React Native Android开发环境

需要:JDK,Android SDK,Node.js 1.安装JDK 去Java官网下载列表选择Mac OS X x64版 2.安装Android SDK 虽然现在谷歌推荐使用Android Studio,但是我还是选择了单独安装Android SDK. 这是一个比较全的目录,上面的链接是官方的,有wall,用下面的基本都是网盘资源,速度还可以,记得修改Android SDK在线更新镜像服务器. PS:在Android SDK Manager里要装API 23的 安装完成后,一定要设置环境变量:

react-native —— 在Mac上配置React Native Android开发环境排坑总结

配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Preferences/AndroidStudio* rm ~/Library/Preferences/com.google.android.studio.plist rm -Rf ~/Library/Application\ Support/A

windows下搭建Apache+Mysql+PHP开发环境

原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5.5php-5.3 下载地址 环境下载 官方下载地址 Apache MySql PHP 至于我使用的版本已经上传到百度云提供大家下载了,这里就不多啰嗦了!! Apache Apache的安装和普通的应用程序安装没什么太大的区别,关键是配置.打开安装路径下的"conf\httpd.conf"文

Windows下搭建Eclipse+Android4.0开发环境

官方搭建步骤: http://developer.android.com/index.html 搭建好开发环境之前须要下载以下几个文件包: 一.安装Java执行环境JRE(没这个Eclipse执行不起来)和JDK 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html, 先装JRE,再装JDK,这个没什么说的,直接点击下一步就好了.... 二.安装Android SDK 下载地址:http://develop

记一次在Windows上搭建React Native Android环境踩过的坑

要说最近技术圈什么比较活跃,我想除了动态加载框架和热修复技术之外,非Facebook的React Native莫属了吧,其实RN对IOS的支持比较早,但是Android似乎难产了,直到9月份才刚开源.距离RN开源也有一段时间了,一直没有去学习,今天兴趣来潮,索性学一把吧. 本文假设你的Windows上安装了Android SDK,并配置好了环境变量. 安装Node.js 从官网https://nodejs.org/en/下载Node.js的windows版,也不知道为什么版本迭代这么快,之前安装