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

软件安装及环境配置

JDK 1.8.x

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

版本选择：选择与操作系统对应的版本进行安装。点击接受许可协议后，进行下载，双击已下载的.exe执行文件进行安装，可一路默认安装，安装路径为

C:\Program Files\Java\*

，包括两个目录：jdk和jre。

设置JAVA_HOME环境变量，依次打开

控制面板

->

系统和安全

->

系统

->

高级系统设置

，点击

高级

选项卡下的

环境变量

打开环境变量配置，选择

新建

，输入变量名：

JAVA_HOME

，对应的变量值：

C:\Program Files\Java\jdk1.8.0_151

。

依次再添加变量名：

CLASSPATH

，变量值：

.;%JAVA_HOME%\lib;

；修改

PATH

变量，新增变量值：

%JAVA_HOME%\bin

。

重启电脑，使环境变量生效或使用快捷键

win+R

输入

cmd

回车，打开cmd窗口，键入

set PATH=C:

，关闭cmd窗口。

测试是否安装成功。重新打开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

Python 2

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

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

C:\Python27

。

配置python环境变量。修改

PATH

变量，新增变量值：

C:\Python27

。

重启电脑，使环境变量生效或使用快捷键

win+R

输入

cmd

回车，打开cmd窗口，键入

set PATH=C:

，关闭cmd窗口。

测试是否安装成功。打开cmd窗口，键入

python -V

，打印如下信息：

Python 2.7.14

Node

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

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

C:\Program Files\nodejs

。

测试是否安装成功。打开cmd窗口，键入

node -v

，打印如下信息：

v8.9.3

如果提示

'node' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

，手动修改环境变量的

PATH

变量，新增变量值：

C:\Program Files\nodejs\

。

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

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

npm是node的
b40f
包管理工具，安装node时会自动安装，查看其版本信息：

npm -v

，打印如下信息：

5.5.1

。

Yarn(非必需)

npm全局安装

npm install -g yarn

。

测试是否成功：

yarn -v

，打印如下信息：

1.3.2

设置淘宝镜像源：

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

React-Native cli

npm全局安装

npm install -g react-native-cli

。

测试是否成功：

react-native -v

，打印如下信息：

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

Android Studio

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

双击执行.exe可执行文件，进行安装，可一路默认，安装地址：

C:\Program Files\Android\Android Studio

。

安装成功后，打开，依次

File

->

Settings

->

Appearance & Behavior

->

System Setting

->

Android SDK

，勾选

API Level 23

，点击

Apply

进行安装。

配置

ANDROID_HOME

环境变量，变量名：

ANDROID_HOME

，变量值：

C:\Users\用户名称\AppData\Local\Android\sdk

。

PATH

变量中添加Android SDK的Tools目录。修改

PATH

变量，新增变量值：

C:\Users\用户名称\AppData\Local\Android\sdk\tools

和

C:\Users\用户名称\AppData\Local\Android\sdk\platform-tools

。

编辑注册表。使用快捷键

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

。

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

环境及软件可用性测试

打开

VS Emulator for Android

，选择API LEVEL 23的模拟器。

创建及运行测试项目

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

执行终端显示

BUILD SUCCESSFUL

，node终端显示编译信息，模拟器

Welcome to React Native

，修改AwesomeProject项目的App.js文件中内容保存，打开模拟器，双击键盘的

R

键，会看到修改后的变化。