Windows10 准备/安装React研发环境

安装NodeJS环境,附带NPM

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

下载NodeJs

12.81.1 LTS长期支持版:https://nodejs.org/dist/v12.18.1/node-v12.18.1-x64.msi

官网:https://nodejs.org/zh-cn/

验证安装

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 FilesJavajdkxxxxxx

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

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

%JAVA_HOME%in

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

CLASSPATH
.;%Java_Home%in;%Java_Home%libdt.jar;%Java_Home%lib	ools.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

Android Studio最新版下载:https://r4---sn-2x3een7l.gvt1.com/edgedl/android/studio/install/4.0.1.0/android-studio-ide-193.6626763-windows.exe?cms_redirect=yes&mh=Aa&mip=113.104.248.111&mm=28&mn=sn-2x3een7l&ms=nvh&mt=1595221517&mv=m&mvi=4&pl=19&shardbypass=yes

官网: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:UsersxxxxxxAppDataLocalAndroidSdk

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

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

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

%ANDROID_HOME%platform-tools
%ANDROID_HOME%emulator
%ANDROID_HOME%	ools
%ANDROID_HOME%	oolsin

创建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

原文地址:https://www.cnblogs.com/craigtaylor/p/13175074.html