window系统下React Native开发环境搭建

1.下载安装jdk

1)下载jdk

打开下载地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

根据自己的电脑配置选择相应的版本到自己的安装目录,如下图所示

window系统下React Native开发环境搭建

点击安装,安装步骤如下

window系统下React Native开发环境搭建


window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

这里不要安装到C盘,自己在其他盘建一个文件夹,我这里的路径如下图所示(要记得jdk的安装目录,后面会用到)

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

这步是下载jre,自己新建一个目录存放,我的如图所示

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

2)接下来配置jdk的环境变量

我的电脑->右键->属性->高级系统设置->环境变量

window系统下React Native开发环境搭建


在系统变量下新建一个环境变量名称为JAVA_HOME,变量值为当前安装JDK的目录

window系统下React Native开发环境搭建

系统变量中,点击Path变量,并将 ;%JAVA_HOME%\bin; %JAVA_HOME%\jre\bin;追加到变量值后面

window系统下React Native开发环境搭建


确定以后检测是否安装成功   win+R  输入cmd  打开命令行工具后输入java -version

window系统下React Native开发环境搭建

如果出现上图结果,则表示安装成功。

2.下载安装SDK

1)下载sdk

打开下载地址http://www.androiddevtools.cn/出现如下界面

window系统下React Native开发环境搭建

点击Android SDK工具下的SDK  Tools进入这个页面

window系统下React Native开发环境搭建

这里我根据自己的系统选择了下载了这个压缩包,并解压到自己建的文件下,里面有这几个文件夹

window系统下React Native开发环境搭建

打开SDK Manager下载,根据需要选择API版本,可以先下载最新的API,后面根据需要再下载,下载成功以后后面staus会变成

Installed,我这个是之前下好的状态,装的时间会有点久。

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

2)设置sdk的环境变量

新建一个系统环境变量,变量名为ANDROID_SDK_HOME,变量值为你的SDK安装路径(一定得找对sdk的安装路径,否则后面会有问题),如图所示:

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建


把 ;%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools添加到Path环境变量中。

window系统下React Native开发环境搭建


3)检测是否安装成功  在命令行输入 adb  version

window系统下React Native开发环境搭建

3.安装nodejs

写到这里犯懒了,放个安装教程链接吧点击打开链接

4.安装git

再放个安装教程链接好了:点击打开链接

5.下载安装android stuodio

window系统下React Native开发环境搭建

去这个网站http://www.android-studio.org/,一步一步安装即可。

6.安装react native

node -v  检查是否安装node

npm -v   检查是否安装npm

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global                     利用国内淘宝镜像加快安装速度
npm install -g react-native-cli    安装react native
如图所示
window系统下React Native开发环境搭建

新建一个项目试试  react-native init 项目名称

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建


出现上图则表示建项目成功

接下来运行这个项目,可以在真机或者模拟器上运行,这里选择模拟器运行

在这之前先手动安装gradle加快运行速度,安装过程如下:

下载安装gradle

从官网下载gradle

window系统下React Native开发环境搭建


window系统下React Native开发环境搭建


下载完解压到自己的目录,然后配置gradle的环境变量,如下图所示

window系统下React Native开发环境搭建

新建系统变量,GRADLE_HOME  变量值为gradle的安装目录

然后编辑系统变量path,添加;%GRADLE_HOME%\bin,如下图所示

window系统下React Native开发环境搭建

最后检查一下是否安装成功,命令行输入gradle -v ,结果如图,则表示gradle已经安装成功。

window系统下React Native开发环境搭建

用webstorm打开项目,在终端输入react-native run-android,运行项目

window系统下React Native开发环境搭建

在这之前还要下载一个夜神模拟器,下载完直接安装,然后打开终端输入adb.exe connect 127.0.0.1:62001

然后设置自己的IP地址加8081端口

window系统下React Native开发环境搭建

设置完以后点返回键,然后Reload一下

window系统下React Native开发环境搭建

window系统下React Native开发环境搭建

出现以上界面,React  Native的环境就算搭建完了。

第一次这么认真的写篇博客了,虽然中间还犯懒啦哈哈哈,,

现将搭建RN开发环境过程中遇到几个坑做个总结:

1.设置环境变量的时候,变量值一定要找对路径

2.JDK的版本要是1.8版本的

3.一台电脑只能装一个JDk版本,有多余得到要卸载掉,不然后面运行项目会报错

3.gradle版本和JDK版本,不能一高一低,否则也会报错

4.每个项目用到的API版本不一样,可以在android/src/bulid.gradle 文件中找到对应的API,再到SDK中进行下载。

5.每次安装都有新感觉,遇到问题多多百度就是啦哈哈。