Windows10 准备/安装React研发环境

安装NodeJS环境，附带NPM

因为React依赖NPM（Node.js Package Manager）来安装，所以我们可以先安装Node.Js环境。
Node.Js会自动带NPM组件和自动安装配套的可选组件，非常简便。

下载NodeJs

12.81.3 LTS长期支持版：https://nodejs.org/dist/v12.18.3/node-v12.18.3-x64.msi

验证安装

node -v
npm -v

设置NPM镜像，避免国内环境坑
国外环境你懂，所以这里在CMD里面我们设置下全局节点为淘宝吧，避免后面遇到环境问题，七七八八。

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

安装React Native 命令行工具

有了前面的NPM之后，我们就可以愉快的用NPM来安装React Nativ Cli了

npm install -g react-native-cli

PS：卸载可用“npm uninstall -g react-native-cli”

安装Yarn，来加速安装替换NPM

Yarn是Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

npm install -g yarn

同时我们也可以把yarn从官网源切换到国内节点，比如

yarn config get registry
yarn config set registry 'https://registry.npm.taobao.org'

安装Native开发所需的Java SDK

下载并安装Java SDK

如果Oracle要求你注册账号，你就老实注册一个。

JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）

下载地址：https://download.oracle.com/otn/java/jdk/8u231-b11/5b13a193868b4bf28bcb45c792fce896/jdk-8u231-windows-x64.exe?AuthParam=1592777279_872afabc0b8f3c448139b89be53a63a6

官网：https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html

设置环境变量，让React感知Java SDK位置

React Native 需要通过环境变量来了解你的 Java SDK 装在什么路径，从而正常进行编译。

可以通过“设置 - 关于 - 右侧系统信息 - 高级系统设置 - 高级 - 环境变量 - XXXX用户变量 - 新建”

JAVA_HOME
C:\Program Files\Java\jdkxxxxxx

同时添加Bin目录到环境变量Path中

通过“设置 - 关于 - 右侧系统信息 - 高级系统设置 - 高级 - 环境变量 - XXXX用户变量 - Path - 编辑 - 新建”

%JAVA_HOME%\bin

同时在系统变量中新建CLASSPATH项

CLASSPATH
.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar

如果之前打开了控制台，需要重启控制台，环境变量才生效。

安装Native开发所需的Python 2.x

下载地址：https://www.python.org/ftp/python/2.7.18/python-2.7.18.amd64.msi

官网：https://www.python.org/downloads/release/python-2718/

安装Native开发所需的Android Studio及SDK

Google良心，在国内架设了一个服务器，这个国内网址不用额外上网就可以直接愉快下载了。

下载Android Studio

官网：https://developer.android.google.cn/studio#downloads

安装Android Studio

一路安装就好，几乎没坑，启动界面很好看，有没有？

安装Android SDK

启动界面，进入“Configure”，找到“SDK Manager”，或者进入主页之后，顶部"Tools"找到"SDK Manager"

在“SDK Platforms”页面，打开右下角“Show Package Details”，然后在Android 9.0/Android 10勾选如图所示的相关组件，点击“Apply”

在“SDK Tools”页面，打开右下角“Show Package Details”，然后在“Android SDK Build-Tools 30”勾选如图所示的相关组件（重点是React支持的28.0.3），点击“Apply”

点击“Apply”之后，开始下载按钮，速度还挺完美的，好像不需要额外上网。

另外，推荐安装一下HAXM（Intel 虚拟硬件加速驱动），如果没安装就勾选下，我这里之前默认就安装上了，所以就不需要再安装了。

准备Android 模拟器

启动界面，进入“Configure”，找到“AVD Manager”，或者进入主页之后，顶部"Tools"找到"AVD Manager"

点击“Create Virtural Device”创建一个“AVD（Android Virtual Device，安卓虚拟设备）”，推荐选择“Nexus S”

不用理会红字警告，这里Google当然是希望你装带Google Play的版本，但是那玩意，国内根本玩不了

点击那个小三角，就是启动了，开始丑爆模式

设置环境变量，让React感知Android SDK位置

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

可以通过“设置 - 关于 - 右侧系统信息 - 高级系统设置 - 高级 - 环境变量 - XXXX用户变量 - 新建”

变量名：ANDROID_HOME
变量值：C:\Users\xxxxxx\AppData\Local\Android\Sdk

如果之前打开了控制台，需要重启控制台，环境变量才生效。

同时添加工具目录到环境变量`Path`中

通过“设置 - 关于 - 右侧系统信息 - 高级系统设置 - 高级 - 环境变量 - XXXX用户变量 - Path - 编辑 - 新建”

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

创建React 项目

给项目取名，比如`“FirstReactApp”`

请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。请不要在目录、文件名中使用中文、空格等特殊符号。

Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

右键进入CMD用命令创建“FirstReactApp”项目

npx react-native init FirstReactApp
# 或者
react-native init FirstReactApp

编译运行React项目

万事俱备，只欠东风

切换到React项目目录，运行命令行，启动项目，只要前面步骤都完成了，基本上一气呵成！

npx react-native run-android
# 或者
yarn android

posted @ 2020-06-22 06:58 TaylorShi 阅读(1007) 评论(0) 收藏举报

刷新页面返回顶部

TaylorShi