标签:
http://my.oschina.net/jackzlz/blog/508210
从Java官网下载JDK并安装。请注意选择x86还是x64版本。
推荐将JDK的bin目录加入系统PATH环境变量。
可以单独安装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环境变量。
推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。
从官网下载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-validate@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 ) > bufferutil@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-validate@1.2.1 npm WARN optional dep failed, continuing bufferutil@1.2.1 `npm install --save react-native` failed D:\Workspace\ReactNative\Android>
官方的安装方法是
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-native-cli@0.1.10 C:\Users\WPWL\AppData\Roaming\npm\node_modules\react-nat ive-cli ├── semver@5.1.0 ├── chalk@1.1.1 (ansi-styles@2.1.0, supports-color@2.0.0, escape-string-regex p@1.0.4, has-ansi@2.0.0, strip-ansi@3.0.0) └── prompt@0.2.14 (revalidator@0.1.8, pkginfo@0.3.1, read@1.0.7, winston@0.8. 3, utile@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
并耐心等待数分钟。
首先要修复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 即可。
=====================================================================
已按该教程搭建完成。以下是截图
【转】在Windows下搭建React Native Android开发环境
标签:
原文地址:http://www.cnblogs.com/exmyth/p/5185020.html