【React Native学习之路】环境安装Window版
1、安装配置JDK
如果需要运行RN(React Native简称) android项目,安装JDK是必须的,毕竟android的后台代码是java写的,没有jdk环境是运行不起来的,如果你已经安装了JDK,但是版本比较低的话,建议也安装到最新版本的jdk,安装步骤如下:
1.1 到 http://www.oracle.com/technetwork/cn/java/javase/downloads/index.html 下载最新的jdk,下载好双击安装,一直点下一步即可
1.2 配置jdk环境变量,计算机右键属性->高级系统设置-高级-环境变量-系统变量,增加JAVA_HOME变量,然后编辑Path变量,增加JAVA变量
1.3 配置完环境变量后,检查下当前jdk版本,运行中输入cmd打开控制台,输入java -version查看jdk版本
2、安装配置SDK
2.1 到 http://www.android-studio.org/ 下载最新的Android Studio工具并安装,安装Android Studio主要是用来安装SDK和开发Android原生程序,如果你的项目完全用RN开发,可跳过此步,安装所需的SDK即可
默认SDK安装目录是在C盘,建议安装到其他盘
2.2 配置SDK环境变量,跟配置JDK环境变量类似,先配置下配置一个
ANDROID_HOME的环境变量,指定SDK的目录,然后在Path中增加配置如下几个值
%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%;
到时如果提示缺少相应的SDK版本,可打开SDK管理器下载
3、安装NodeJS
有两种方式安装NodeJS,一种是控制台命令安装,一种直接把NodeJS下载下来安装,建议按第二种方式安装,前者国外网站有时有点抽风,速度会很慢
3.1 命令行安装
先安装包管理器
Chocolatey,以管理员身份打开控制台,执行下面的命令
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
安装好之后再执行下面的命令安装NodeJS
choco install nodejs.install
安装完NodeJS建议设置下npm淘宝镜像,这样以后通过npm安装速度会快点
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
3.2 下载NodeJS安装,从nodejs官网
https://nodejs.org/en/下载最新版本安装即可
4、安装react-native命令
该命令是用来执行创建、初始化、更新项目、运行打包服务(packager)等任务,现在需要通过yarn方式react-native
npm install -g yran react-native-cli
安装完可在控制台执行
react-native,如果出现如下结果,表明安装成功
5、初始化React Native项目
新建一个目录存放react native项目,然后进入这个目录执行下面的命令初始化即可,init后面为项目名称,初始化完的项目大小大概200M
react-native init ReactNativeDemo
cd
ReactNativeDemo
react-native run-android
这一步项目已经启动成功了,但是没有模拟器和真机,所以无法安装apk
6、真机运行React Native
要在手机上运行React Native项目,首先手机要开启USB调试模式,每个手机开启USB的方式不一样,可自行百度,开启USB调试模式后,连上电脑,输入如下命令查看是正常连接
adb devices
如果出现如下截图,表明手机已正常连接
手机连接后按第五步的操作运行程序,默认会自动启动包服务器,如下图
如果没有启动默认启动包服务器,可执行如下命令启动
react-native start
正确启动后,可在手机上找到一个ReactNativeDemo应用,点击打开后会让你设置允许在其他应用上层显示,打开之后的Demo界面如下