前言

1：React Native最近很火，我也想踩一下这个坑，但是由于从来么有接触过，就简单的记录一下React Native的安装吧

2：React Native基于Windows系统下安装=>>>>>Windows10环境,Webstorm2018 1.2版本

主要的开发环境主要有node.js + react native + android sdk Git工具（可选）Python 2注意目前不支持Python 3版本。

1、下载安装node.js

在安装前确认一下是否有安装，在cmd命令下载输入node -v则会出现以下，如图所示，我已经安装了node.js8.11.1

WebStorm安装React Native_cmd命令 image.png


假如没有安装node.js话去​​​node.js官网​​​node.js环境配置我是系统直接给我配置好了，没有配置过的在看如图所示

我的电脑右键属性，高级系统属性、环境变量

WebStorm安装React Native_android_02 image.png


系统环境变量PATH下

WebStorm安装React Native_node.js_03 image.png


点击编辑添加你的node.js安装路径

WebStorm安装React Native_node.js_04 image.png

配置npm源

由于国外的npm服务器下载太慢了，因此配置国内淘宝的镜像服务器如下：

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

2、安装React Native环境

cmd命令执行

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

由于我已经安装了没有卸载所以出现以下（如图所示）假如有错误的情况请去React Native​[中文网]{​​​​​​​​​​​}​去看具体教程

WebStorm安装React Native_node.js_05

image.png


测试安装react native环境是否成功，可以在任意目录执行如下命令，新建一个react-native工程

react-native init ReactDemo

当然了创建demo这个过程有点小漫长

WebStorm安装React Native_android_06 image.png


就这样创建成功了

初始化工程目录如下，由于我只有一个盘符C盘

WebStorm安装React Native_cmd命令_07 image.png


创建成功了去Webstorm里面

WebStorm安装React Native_cmd命令_08 image.png


WebStorm安装React Native_cmd命令_09 image.png


WebStorm安装React Native_cmd命令_10 image.png


1.1用你的AndroidStudio打开此工程

1.2Webstorm运行ReactDemo，我的被窝改过了，没有改过的运行Android就行了

WebStorm安装React Native_cmd命令_11 image.png


运行效果如下所示

WebStorm安装React Native_node.js_12

image.png


就这样完成了