【RN - 基础】之Windows下搭建React Native开发环境

前言

　　React Native由Facebook公司于2015年F8大会上开源，其主张“Learn once, write everywhere”。React Native的核心设计理念是：既拥有Native（原生）的用户体验，又拥有React的开发效率。

　　目前，React Native已经基本上完成了对多端的支持，实现了真正意义上的面向配置的开发。开发者可以灵活的使用HTML和CSS进行布局，使用React语法构建组件，实现H5、Android、iOS等多端的代码复用。

　　就目前来看，React Native的优势有三点：跨平台、追求极致的用户体验、Learn once, write everywhere。

　　以上是对React Native的简单介绍，接下来言归正传，介绍Windows下React Native的开发环境的搭建。

准备工作

　　在配置React Native的开发环境之前，我们首先需要具有这些环境：

JDK

　　去Oracle的官网上下载。别忘了配置环境变量。

SDK

　　SDK可以通过下载并安装Android Studio来获取，反正以后是以RN和原生代码结合开发的，因此下载AS是必须的。安装之后别忘了配置SDK的环境变量。

　　安装好SDK之后，打开SDK Manager，下载一些组件，需要确保以下几点：

• Extras文件夹中的组件全部下载；
• 下载API 23或23以下的版本的Platform以及Image，并在Tools中下载这个API版本的最低版Build-tools。

　　下载完成之后，可以先创建一个Andorid模拟器，留待后用。

Git

　　下载并安装Git，配置SSH KEY、用户名和邮箱等。

Node

1、在NodeJS官网下载NodeJS + NPM的安装包（地址： https://nodejs.org/en/download/ ），选择Windows Installer (.msi)下载到本地，安装到任意目录下；

2、为检查Node是否安装成功，我们可以通过 node -v 、 npm -v 、 nvm v 三个命令来查看Node环境的版本。

配置React Native

　　在GitHub中搜索 react-native ，找到Facebook的项目react-native，打开Git Bash使用git clone命令将其克隆到本地，如： git clone https://github.com/facebook/react-native.git 。

　　克隆成功后，打开命令行工具，进入刚刚克隆的项目中的 react-native-cli 目录中，输入 npm install -g 命令，等待安装完成，就可以在命令行中使用react-native命令了。

　　为了验证React Native是否安装成功，我们可以通过 react-native -v 命令来查看RN的版本。

React Native版本控制

　　我们可以通过一下几条命令来对React Native进行版本控制。由于React Native现在还处于高速发展的阶段，因此GitHub上的仓库更新会很频繁，因此我们需要与时俱进，及时下载体验最新的React Native组件。

　　查看React Native的当前版本： react-native --version

　　查看React Native在npm包中的最新版本： npm info react-native

　　更新本地React Native的版本（更新到最近最稳定的版本）： npm update –g react-native-cli

　　将React Native升级或降级到某个指定版本： npm install –-save react-native@版本号

下载并运行默认项目

　　React Native为我们提供了一个默认的入门项目AwesomeProject，我们可以通过这个项目来入门React Native，同时进一步验证React Native是否真正的安装成功了。

　　1、创建一个目录用来盛放AwesomeProject，然后打开cmd，进入这个目录中，输入 react-native init AwesomeProject 命令，等待一段时间，直到出现“To run your app on Android ......”，表示初始化AwesomeProject完成。

　　2、在cmd中进入AwesomeProject中，输入 react-native start 命令，开启React Native的服务器。

　　3、打开一个Andorid模拟器。

　　3、不要关闭开启服务器的cmd，重新打开一个cmd，进入AwesomeProject下，输入 react-native run-android 命令，将项目运行到Andorid模拟器上。

　　注意：

　　第一次运行的时候会下载gradle包，可能会比较慢，需要耐心等待。

　　如果运行时报错，可以查看cmd中的错误信息，主要查看“What went wrong”标题下的错误信息，一般都是SDK Manager中下载的组件不合格导致的。

　　如果出现“Starting intent: ......”字样，则表示运行成功，跳转到模拟器中，就可以看到项目的Welcome界面了。

　　如果模拟器上爆红，大家可以根据错误信息，百度或Google解决。

开发工具推荐

Web Storm

　　Web Storm是JetBrains下的一款产品，可以开发很多由JavaScript衍生的框架代码。

　　Web Storm的优点是，它与Android Studio很相似，因此使用过AS的人会很容易上手。

　　Web Storm的缺点是，它对React Native的支持还不够完善，比如，代码提示不完善等。而且，Web Storm还需要破解。

VS Code

　　VS Code，全称Visual Studio Code，一看就是MS的产品，但它摒弃了VS臃肿的特点，VS Code特别轻量，几乎就是一个文本编辑器，但它的功能还是很齐全的。

　　VS Code的优点是，轻量，开源，对React Native支持较好。

　　VS Code的缺点是，设置比较繁琐，快捷键什么的用起来不顺手。

　　针对上面两种开发工具，我认为在开发React Native来说，VS Code是比较好用的。

参考资料：

【React Native 中文文档】