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

时间:2021-07-22 16:16:16

前言

  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 中文文档