ReactNative Windows下搭建环境

前期准备：新建一个文件夹，存放搭建环境所需安装的软件，如ReactNaitve Softs（文件夹名不能带空格）

1.node.js（版本必须高于 8.3）

下载地址http://nodejs.cn/download

image.png

1.1、这个比较简单，下载后，一路按next安装，完成后就自动配置好了，不需要另外操作。
1.2、设置镜像源为淘宝源，这样在国内访问会比较快，不用墙也行。

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

注意：不要使用cnpm,不然会出现莫名其妙的问题。

设置镜像.png

2.安装python（版本必须为 2.x，不支持 3.x）

下载地址：https://www.python.org/downloads/windows

python_01.jpg

python_02.jpg

python_03.jpg

!注意：安装时，选择添加到环境变量

image.png

3.安装Yarn、React Native的命令行工具

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

3.1、安装yarn

npm install -g yarn react-native-cli

image.png

3.2、安装完 yarn 后同理也要设置镜像源：

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

image.png

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

4.安装git

下载地址：http://gitforwindows.org/
在安装过程中注意勾选"Use Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中，其他默认即可

image.png

5.安装 JDK（1.8以上）

下载地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

JDK.png

下载完成后点击安装包开始安装，一直下一步就好，这里将其安装在 C盘。
安装好之后，就需要配置一下环境变量 ， 具体配置如下

image.png

在用户变量中， 添加新变量，命名为java_home，地址为 C:\Program Files\Java\jdk-10.0.2，注意，我之前的JAVA文件所在地址。
在Path中添加两个变量。 分别的地址为 C:\Program Files\Java\jdk-10.0.2\bin
可能还有的问题
做完上面的操作之后，有可能还是不行。这里有两个解决方法。

第一个，重启一下 cmd
第二个，在Path中，调整下那两个bin文件夹的位置（上移到最上面），之后，再重启cmd
从上面的第二个方法就可以知道，其实，这个javac这个exe文件就在这个bin文件夹中（就是jdk的那个）。

image.png

6.安装Android Studio

下载地址：http://www.android-studio.org/

android SDK下载：http://www.android-studio.org
1. 禁止第一次启动
    到AS安装目录，打开bin目录，编辑idea.properties, 在文件末尾添加:
    disable.android.first.run=true
 
2.设置HTTP代理
   点击 --->File
         --->Settings
           --->System Settings
            --->HTTP Proxy进行设置
Host name: mirrors.neusoft.edu.cn 
Port number：80
 
3.找到SDK Manager即可下载

image.png

image.png

image.png

7.安装Android SDK

更换Android SDK Location（默认在c盘，添加环境时，很容易爆掉c盘）

7.1、选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

546421-20160709101831702-36057693.png

7.2、在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）

image.png

image.png

选择好了上面所需的 SDK 和工具之后，点击 OK 执行安装。

8.配置 Android SDK 环境变量

8.1、配置 ANDROID_HOME 环境变量，将环境变量设置为 Android SDK 的安装目录。

QQ截图20180917233223.png

8.2、将 Android SDK 安装目录下的 tools 和 platform-tools 加入到系统环境变量中

QQ截图20180917003151.png

在cmd输入adb，可以看到版本信息，证明设置环境变量成功。

image.png

9.开启虚拟化。

在BIOS里面，有CPU频率那里，有个SVM的，设为enabled（自行百度当前主板设置虚拟 ）

image.png

image.png

10.安装 Genymotion 模拟器（支持win7,8,10）

10.1、进入官网，我们下载with VirtualBox版，这样会方便很多。
PS.在下载之前您得首先在官网注册一个账号。

QQ截图20180917004711.png

image.png

image.png

10.2、打开Genymotion,点击Add按钮

image.png

选择Android version为6.0。因为上面在SDK Manager中选择了6.0的api，所以这里也选6.0.

image.png

选择一个设备，这里选了768x1280,可按自已的需求选择就行。然后点击Next.

image.png

等待几分钟后，就可以下载完成。点Finish即可。可以看到，多了一个设备。

image.png

10.3、设置virtualBox

image.png

image.png

image.png

设置好后，回到Genymotion，选择刚才新添加的设置，然后点击Start
这时，可以看到模拟器启动起来了。

image.png

11.运行项目

新建一个文件夹，利用命令控制窗口进入文件夹初始化一个项目：react-native init AwesomeProject