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

457475451

　　http://www.jianshu.com/p/2fdc4655ddf8



安装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环境变量。

安装Git
　　下载Git，记得把git.exe的路径写入系统环境变量，因为在执行react-native init命名时会调用git去下载react-native的源码。

安装Python并配置环境变量
　　https://www.python.org/downloads/release/python-2711/
　　要配置环境变量,否则报错

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

安装node.js
　　从官网下载node.js的官方4.1版本或更高版本。npm（node package manager）是随着node.js就安装好的，为了加速安装其他的package，在cmd里输入以下命令：



npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
　　

安装react-native命令行工具

npm install -g react-native-cli

创建react-native android项目

react-native init MyProject
　　这一步要等上很长时间，原因不明。不想等待的话可以在这里下载项目文件，然后将android目录下的gradle.properties文件中的sdk.dir设为本机上sdk的目录。
sdk.dir=F:\\android\\sdk

启动react-native服务
　　进入项目文件夹，输入启动命令

react-native start
　　在浏览器中访问地址：http://localhost:8081/index.android.bundle?platform=android
第一次访问需要骚等一会，这是在生成android的bundle文件。cmd窗口别关，一直保持开启状态。

在模拟器中运行
　　进入项目目录，输入命令：

react-native run-android
　　第一次运行时会需要下载一些东西，等待就行。
build成功后便会在模拟器上自动运行了





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>
　　如果是连真机的话，很大可能看到的结果是一片白啊一片白。经查，发现是安全中心中的“悬浮窗”权限并没有对我们的这个新app开放，那么将权限开放，重启app，啊呀，一片红啊一片红。。。长按物理菜单键或者死命摇一摇手机，会弹出一个小窗口，选择“Dev Settings”，然后选择“Debug server host for device”，会弹出一个输入框，输入电脑ip地址和默认的8081端口，再次重新app，啊呀，粗线了粗线了。。。
　　但是由于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 即可。
　　=====================================================================
　　已按该教程搭建完成。以下是截图