准备工作
- 下载必备软件
- 软件列表
- Python
地址：https://www.python.org/downloads/ - Node.js
地址：https://nodejs.org/en/（下载LTS版本） - Java Development Kit（JDK）
地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html - Gradle
地址：https://downloads.gradle.org/distributions/gradle-2.4-all.zip - Android Studio
地址：http://developer.android.com/
- Python
以上所有软件百度网盘下载地址：http://pan.baidu.com/s/1nvjkaAP
安装软件
安装以下软件
- Python
- Node.js
- JDK
以上三个软件，请按照默认路径安装
调试虚拟机
请最后再安装
Android Studio
安装完成后
打开Android Studio
请点击如下图第二项，并选择“OK”按钮
![Uploading 4_194039.png . . .]
之后会弹出报错窗口，点击报错窗口的“Cancel”
在弹出的新界面当中，点击“Next”按钮
先点击“Custom”，接着点击“Next”
全部勾上所有按钮，再点击“Next”
出现该窗口时，请记录Android SDK Location
请务必记下该路径
点击“Finish”按钮
在新的界面点击“Configure”
在下拉菜单当中选择“SDK Manager”
按照箭头所示，点击该处
选择“Android6.0(API23)”的下拉列表，勾选图中所示
勾选“Tools”下方所有图中所示的包，请注意一直勾选到21.1.2，下方Android7.1.1（API25）的所有勾选请取消，变为不勾选
点击右下方的“Install”按钮
在弹出的窗口中点击“Accept License”选项
最后点击“Install”按钮
安装完成后，关闭窗口，点击圆圈所示的位置，新建新项目
默认信息不要动，点击“Next”
默认信息不要动，点击“Next”
点击如图所示的圆圈处，在点击“Finish”
点击右上方的手机图标
点击，新建虚拟机
按照如图所示的参数，选择默认选项的配置手机，之后确认无误后，点击"Next"
按照如图所示的配置，选择虚拟手机操作系统，并且点击下一步
点击“Finish”完成配置
再次点击手机按钮
点击“Install Haxm”
跟随系统默认配置，无需更改，点击“Next”
如弹出windows授权命令框，请允许其运行
如下图所示，安装完成，点击“Finish”
点击如图所示区域，启动虚拟机
如果提示需要在主板当中打开Intel Virtualization Technology
请自行百度Intel Virtualization Technology开启方法
打开完成后，即可看到如图所示虚拟机
设置ANDROID_HOME变量
将刚刚开启的虚拟机放在后台，最小化，等待稍后调用
打开我的电脑，win10下，右键点击“此电脑”
其他系统右键点击“我的电脑”
在弹出的菜单中选中“属性”
点击后出现如下窗口，点击“高级系统设置”
如下选择“环境变量”
在弹出的窗口中，点击如图位置的新建
在变量名中输入“ANDROID_HOME”
在变量值当中，输入之前记录的Android SDK Location
完成后点击确定，如下两个窗口依次点击确定
初始化React Native
在windows8、8.1、10系统下，同时按住"win+x"组合键，再按下"A"键，即可弹出如下命令窗
在windows7系统下，同时按住"win+r"组合键，弹出如下窗口
在“打开”旁边的输入框中输入“cmd”，然后按下确定
即可弹出如下命令框
在弹出的命令框当中输入以下指令，回车
npm config set registry https://registry.npm.taobao.org --global
输入完成后，回车，输入下一条指令
npm config set disturl https://npm.taobao.org/dist --global
以上指令的目的是在于将npm下载的地址转为国内的地址，加快下载速度，至于npm是什么有兴趣的同学，可以自行百度，与你们之前下载的node.js有关
设置完地址后，接下来需要安装react-native-cli，在命令行当中输入如下指令，回车：
npm install -g react-native-cli
如图显示，安装成功
注意：
react-native-cli是一个终端命令，它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native
的命令。这个安装过程你只需要进行一次。
大家注意我们目前的命令窗口，圆圈处的部分，该部分为当前路径
举个栗子，就像你开了一个文件窗口，路径如下
与其性质是一样的
那么我们不想把文件放在这里，怎么办？？那就切换路径，和大家平时切换硬盘存文件是一个道理，在命令行中输入如下指令，回车
d:
你会发现你的前面路径已经变为D盘了
同样的，如果你想换成E、F、G盘都没问题，换一下“d:”就可以了
接着，初始化一个react-native项目，在命令行中输入如下指令，回车：
react-native init SampleAppMovies
这个命令会初始化一个工程、下载React Native的所有源代码和依赖包
出现如下字样时，请耐心等待
显示如下字样时，证明已经安装完成
请注意命令行当中的提示
To run your app on iOS:
cd C:\SampleAppMovies
react-native run-ios
- or -
Open C:\SampleAppMovies\ios\SampleAppMovies.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd C:\SampleAppMovies
react-native run-android
该提示当中已经说明如何在Android当中运行React Native
先开启虚拟机后，再在命令行当中输入
cd C:\SampleAppMovies
切换至对应的文件夹
注意：示例当中是安装在C盘，请不要模仿输入，按照你自己的安装路径进行输入，具体参见安装完成后的不同提示
接下来，暂时先不输入
react-native run-android
打开你工程所在的文件夹，如果你是在D盘初始化的，打开D盘，寻找SampleAppMovies文件夹，其他盘符也是类似
在文件夹当中拷入刚刚下好的“gradle-2.4-all.zip”文件，如下图所示：
按照如下步骤打开文件夹
下载Notepad++，安装后，右键点击“gradle-wrapper.properties”文件，选择“Edit with Notepad++”选项，打开后如下
删除“=”号后的所有内容，如上如圈内所示
输入
file:///C:/SampleAppMovies/gradle-2.4-all.zip
如果是安装在其他盘请替换C盘符，换成相应盘符
修改完成后按“ctrl+s”保存
再回到命令行当中输入如下指令：
react-native run-android
完成后回车
出现如下字样请耐心等待
注意：请不要关闭弹出的如下窗口
成功后出现如下字样
接着，打开刚才最小化的虚拟机
就能看见你的第一个APP啦！
接着，打开webstorm
点击open，打开新项目
或者在窗口中，点击file=》open
在相应路径找到SampleAppMovies文件夹，并打开
双击文件夹，展开列表
点击index.android.js文件
稍等片刻，上方会出现横栏，按照图示点击Switch，切换到JSX语言
稍等片刻，在新出现的横栏中，点击“Dismiss”
即不将ES6转化为ES5
接着点击node_modules，如下图
找到并点击"react-native">"packager">"react-packager">"src">"node-haste"~>"FileWatcher"，
在FileWatcher文件夹下，点击index.js
找到
const MAX_WAIT_TIME = 120000;
如下图所示
将120000改为800000
该设置主要解决，在模拟环境下，修改文件后，双击键盘R键，刷新无响应的情况
此时完成所有初始环境设置
注意
每次调试时
请先打开虚拟机，具体步骤为：
- 打开android studio
- 点击右上方小手机图标
- 启动虚拟机
虚拟机启动后
请打开命令窗，打开方式详见初始化React Native，切换到对应的项目文件夹后，在命令行中输入
react-native run-android
等待所有操作结束后，即可在虚拟机中看到所写程序
打开webstorm，点击"index.android.js"文件，即可修改相关代码，编辑属于自己的React Native程序
