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://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
Windows10 准备/安装React研发环境的更多相关文章
- Windows10 准备/安装Flutter研发环境
Flutter简介 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台. Flutter 中国 安装Flutte ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- Windows版本搭建安装React Native环境配置
1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- Windows版本搭建安装React Native环境配置及相关问题
此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...
- 史上最详细Windows版本搭建安装React Native环境配置
说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...
- windows安装React Native开发运行环境
React Native是什么 React Native是facebook开源的一个用于开发app的框架.React Native的设计理念:既拥有Native (原生) 的用户体验.又保留React ...
- odoo12从零开始:一、安装odoo运行环境(windows10)
前言 鉴于好多朋友说没有mac电脑,windows开发其实也差不了多远,只是个人习惯问题,而且吧,windows的电脑其实配环境也挺快的其实,我在这里再稍微补一个比较简单的windows环境部署,希望 ...
随机推荐
- 分布式日志传输系统Databus(一)--系统介绍
Databus系统是微博DIP团队开源的分布式日志传输系统.它是一个分布式.高可用的,用于采集和移动大量日志数据的服务.它基于流式数据的简单而灵活的架构,具备健壮性和容错性,具有故障转移与恢复机制.它 ...
- [BD] HBase
NoSQL数据库 关系型数据库:用表格的行-列来保存数据,OLTP,写入多,行式存储 非关系型数据库:只用来存储数据,业务逻辑由应用程序处理,OLAP,查询多,列式存储 常见NoSQL数据库 Redi ...
- [刷题] 51 N-Queens
要求 将n个皇后摆放在n*n的棋盘中,使横.竖和两个对角线方向均不会同时出现两个皇后 思路 尝试在一行中摆放,如果摆不下,回到上一行重新摆放,直到所有行都摆下 快速判断不合法情况 竖向:col[i]表 ...
- Python实现TCP通讯
Environment Client:Windows Server:KaLi Linux(VM_virtul) Network:Same LAN Client #!/usr/bin/python3 # ...
- 【转载】ltp压力测试结果分析脚本
博客园 首页 新随笔 联系 管理 订阅 随笔- 8 文章- 0 评论- 0 ltp压力测试结果分析脚本 最近工作性质发生了改变,在做操作系统方面的测试.接手的第一个任务是做ltp stres ...
- Mysql 官网下载二进制包_图解步骤
MYSQL下载方式 下载二进制包,直接使用wget下载 [root@db ~]# wget https://downloads.mysql.com/archives/get/p/23/file/mys ...
- IT菜鸟之网站搭建(emlog)
由多个网页组成的一种集合,叫做网站 网站分为:静态网站.动态网站 静态网站:不会因为时间.地点.用户角色等因素发生内容改变的网站 动态网站:会因为时间.地点.用户角色等因素发生内容改变的网站 注意: ...
- 细谈select函数(C语言) -(转自 piaojun_pj的专栏)
Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect.accept.recv或recvfrom这样的阻塞程序( ...
- JAVA并发(3)-ReentrantReadWriteLock的探索
1. 介绍 本文我们继续探究使用AQS的子类ReentrantReadWriteLock(读写锁).老规矩,先贴一下类图 ReentrantReadWriteLock这个类包含读锁和写锁,这两种锁都存 ...
- Spring 实例化方式有几种?为什么会用到 Cglib?
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! <Spring 手撸专栏>目录 [x] 第 1 章:开篇介绍,我要带你撸 Spri ...