windows 64位下,React-Native环境搭建详解 (Android)

React-Native环境搭建需要： 
1、安装Java JDK 
2、安装Android Studio 
3、安装node.js 
4、安装git 
5、安装Python 2.x （注意目前不支持Python 3版本） 
6、安装react-native-cli 
7、测试环境是否搭建好

附：React-Native中文网环境搭建链接 https://reactnative.cn/docs/0.46/getting-started.html#content

一、java Jdk安装，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html。由于我的系统是64位的，这里选择：jdk-8u131-windows-x64.exe。下载完后，双击jdk-8u131-windows-x64.exe 进行安装。 
接着配置系统环境，右击“计算机”–>”属性”–>”更改设置”–>”高级”–>”环境变量”，如图： 
 
点击系统变量的“ 新建”–>输入 JAVA_HOME以及jdk安装路径，如图： 

在系统变量里找到Path,双击在变量值的最前面加上 %JAVA_HOME%\bin;后，点击确定。如图： 

重打开cmd命令，输入 
java -version 后出现如下图则java环境配置成功： 

二、由于Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。所以android studio安装，下载地址：https://developer.android.com/studio/index.html

附android studio安装教程链接：http://www.runoob.com/android/android-studio-install.html

Android studio安装时，记得要勾选上android sdk,如下图： 

设置环境变量ANDROID_HOME 与JAVA_HOME配置类似，右击“计算机”–>”属性”–>”更改设置”–>”高级”–>”环境变量”，点击系统变量的“ 新建”–>输入 ANDROID_HOME以及sdk路径，例如：（ANDROID_HOME=> E:\Android\sdk）设置环境变量Path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools； 
重打开cmd命令，输入adb 后出现如下图则android 环境配置成功： 

三、node.js安装，下载地址：https://github.com/coreybutler/nvm-windows/releases 下载 nvm-setup.zip 安装文件。 
双击运行安装，安装完后，打开cmd命令窗口，输入nvm -version，出现以下界面，证明nvm安装成功！

为了安装node.js安装更快，nvm配置淘宝镜像 
找到刚才nvm的安装目录下的settings.txt文件，打开在末尾增加 node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

然后通过nvm安装对应版本的nodejs,打开cmd命令窗口，运行 
nvm install latest(安装最新版本) 
也可以指定版本 nvm install 6.10.0 
安装完成后会以下界面： 

四、git安装，如果没有配置git，需要先下载对应的客户端，然后将git加入path环境变量即可. 
下载地址：https://git-for-windows.github.io/

五、Python安装 （注意目前不支持Python 3版本） 
下载地址：https://www.python.org/downloads/release/python-2713/

下载完后，双击安装 python-2.7.13.amd64.msi，安装完后，配置环境变量,在path的最前面添加python的安装路径，如图： 

重打开cmd命令，输入python -v 后出现如下图则python 环境配置成功： 

六、react-native-cli安装（React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。） 
cmd命令，输入 npm install -g yarn react-native-cli 
如果成功的话，如下图所示： 

七、测试React-Native是否搭建好 
主要下面三个命令初始化react-native项目并运行到android手机上。 
1、react-native init HelloProject 
2、cd HelloProject 
3、react-native run-android

步骤1 在F盘创建一个名为RN的文件夹用于包含react-native项目，进入目录，按住Shift+鼠标右键，选择在“在此处打开命令窗口（W）”如图： 

接着输入react-native init HelloProject,初始化react-native项目，运行完后，如果成功会在F盘的RN文件夹生成一个HelloProject项目，如图：

步骤2 cd HelloProject 进入项目

步骤3 电脑通过USB连接手机，手机要在设置打开“开发者选项”（不同的手机，打开的方式不同）。然后输入react-native run-android命令，成功的话会出现下图： 
 

同时，手机上会出现，以下界面 

注意事项： 
如果运行不能成功，有以下可能： 
1、要确保以上工具都安装了，并且到加入系统环境变量的Path路径上

2、存放react-native项目的文件夹名，最好是由字母和下划线组成

3、查看手机是否连接上电脑，可以用adb devices命令查看是否连接上，如下图： 

4、项目中的目录下的 android–>build.gradle中 
compileSdkVersion 23 
buildToolsVersion “23.0.1” 
中的版本，android sdk要包含有。 
查看android sdk build版本，打开android studio,菜单File–>选项 Settings –> Appearance&Behavior –> System Settings –>Android SDK–>SDK Platforms和 SDK Tools,如下图：

5、检查android 环境变量是否配置好

6、如果允许出现白屏或者报错，可以通过摇一摇手机或者电脑cmd运行adb shell input keyevent 82命令，调查调试框，如图： 

接着，点击Dev Settings，如图： 

然后点击Debug server host & port for device，输入ip和端口，如图： 

最后，重新运行 react-native run-android 即可。

附： 
React-native调试： 
1、如果android模拟器的话，可以在电脑键盘上的按两下R (reload项目) 
2、真机调出调试窗口： 
（1）手机摇一摇 
（2）手机菜单键（某些手机不行） 
（3）电脑打开cmd运行 adb shell input keyevent 82 
3、连接模拟器方式 
夜神模拟器 adb connect 127.0.0.1:62001 
逍遥模拟器 adb connect 127.0.0.1:21503