React-Native从零到有(1)——基础环境搭建

开发平台：windows 10 x64

目标平台：Java Android

软件及环境：
1. Java Development Kit 1.8.x(更高版本暂不提供支持)
2. Python 2
3. Node
4. Yarn
5. React Native命令行工具(react-native-cli)
6. Android Studio
7. Visual Studio Emulator for Android

软件安装及环境配置

1. JDK 1.8.x

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

   2. 版本选择：选择与操作系统对应的版本进行安装。点击接受许可协议后，进行下载，双击已下载的.exe执行文件进行安装，可一路默认安装，安装路径为C:\Program Files\Java\*，包括两个目录：jdk和jre。

   3. 设置JAVA_HOME环境变量，依次打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置，点击高级选项卡下的环境变量打开环境变量配置，选择新建，输入变量名：JAVA_HOME，对应的变量值：C:\Program Files\Java\jdk1.8.0_151。

   4. 依次再添加变量名：CLASSPATH，变量值：.;%JAVA_HOME%\lib;；修改PATH变量，新增变量值：%JAVA_HOME%\bin。

   5. 重启电脑，使环境变量生效或使用快捷键win+R输入cmd回车，打开cmd窗口，键入set PATH=C:，关闭cmd窗口。

   6. 测试是否安装成功。重新打开cmd窗口，键入java -version打印如下信息：

      java version "1.8.0_151"
      Java(TM) SE Runtime Environment (build 1.8.0_151-b12)
      Java HotSpot(TM) 64-Bit Server VM (build 25.151-b12, mixed mode)

      键入javac -version，打印如下信息：

      javac 1.8.0_151

2. Python 2

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

   2. 版本选择：选择与操作系统对应的版本进行安装。下载成功后，双击已下载的.exe执行文件进行安装，可一路默认安装，安装路径为C:\Python27。

   3. 配置python环境变量。修改PATH变量，新增变量值：C:\Python27。

   4. 重启电脑，使环境变量生效或使用快捷键win+R输入cmd回车，打开cmd窗口，键入set PATH=C:，关闭cmd窗口。

   5. 测试是否安装成功。打开cmd窗口，键入python -V，打印如下信息：

      Python 2.7.14

3. Node

   1. 下载地址：https://nodejs.org/en/download/

   2. 版本选择：选择与操作系统对应的版本进行安装。下载成功后，双击已下载的.exe执行文件进行安装，可一路默认安装，安装路径为C:\Program Files\nodejs。

   3. 测试是否安装成功。打开cmd窗口，键入node -v，打印如下信息：

      v8.9.3

      如果提示'node' 不是内部或外部命令，也不是可运行的程序 或批处理文件。，手动修改环境变量的PATH变量，新增变量值：C:\Program Files\nodejs\。

   4. 安装完成后可以设置npm的淘宝镜像源做加速：

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

   5. npm是node的包管理工具，安装node时会自动安装，查看其版本信息：npm -v，打印如下信息：5.5.1。

4. Yarn(非必需)

   1. npm全局安装npm install -g yarn。

   2. 测试是否成功：yarn -v，打印如下信息：1.3.2

   3. 设置淘宝镜像源：

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

5. React-Native cli

   1. npm全局安装npm install -g react-native-cli。

   2. 测试是否成功：react-native -v，打印如下信息：

      react-native-cli: 2.0.1
      react-native: n/a - not inside a React Native project directory

6. Android Studio

   1. 下载地址：https://developer.android.com/studio/index.html

   2. 双击执行.exe可执行文件，进行安装，可一路默认，安装地址：C:\Program Files\Android\Android Studio。

   3. 安装成功后，打开，依次File -> Settings -> Appearance & Behavior -> System Setting -> Android SDK，勾选API Level 23，点击Apply进行安装。

   4. 配置ANDROID_HOME环境变量，变量名：ANDROID_HOME，变量值：C:\Users\用户名称\AppData\Local\Android\sdk。

   5. PATH变量中添加Android SDK的Tools目录。修改PATH变量，新增变量值：C:\Users\用户名称\AppData\Local\Android\sdk\tools和C:\Users\用户名称\AppData\Local\Android\sdk\platform-tools。

   6. 编辑注册表。使用快捷键win + R，输入regedit.exe回车，打开注册表编辑器，找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools条目，找到Android SDK Tools(如果没有新增该条目，WOW6432Node右键新建 -> 项，输入Android SDK Tools)，右键新建 -> 字符串值，内容为Path，然后双击该字符串值，输入数值数据：C:\Users\用户名称\AppData\Local\Android\sdk。

7. VS Emulator for Android

   下载地址：https://www.visualstudio.com/zh-hans/vs/msft-android-emulator/?rr=https%3A%2F%2Freactnative.cn%2Fdocs%2F0.51%2Fgetting-started.html

环境及软件可用性测试

1. 打开VS Emulator for Android，选择API LEVEL 23的模拟器。

2. 创建及运行测试项目

   // 创建项目
   react-native init AwesomeProject
   // 运行项目
   cd AwesomeProject
   react-native run-android

3. 执行终端显示BUILD SUCCESSFUL，node终端显示编译信息，模拟器Welcome to React Native，修改AwesomeProject项目的App.js文件中内容保存，打开模拟器，双击键盘的R键，会看到修改后的变化。