WebStorm安装React Native
2018-05-16 本文已影响215人
枫叶豆腐汤
前言
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
![](https://img.haomeiwen.com/i6624077/05e5b2072c5c69c2.png)
假如没有安装node.js话去node.js官网node.js环境配置我是系统直接给我配置好了,没有配置过的在看如图所示
我的电脑右键属性,高级系统属性、环境变量
![](https://img.haomeiwen.com/i6624077/3c8a64926c57d178.png)
系统环境变量PATH下
![](https://img.haomeiwen.com/i6624077/53c92a784b40c7bb.png)
点击编辑添加你的node.js安装路径
![](https://img.haomeiwen.com/i6624077/67f9f452c85b3335.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[中文网]{https://reactnative.cn/docs/0.48/getting-started.html#content}去看具体教程
![](https://img.haomeiwen.com/i6624077/3bab8b54a89c1d21.png)
测试安装react native环境是否成功,可以在任意目录执行如下命令,新建一个react-native工程
react-native init ReactDemo
当然了创建demo这个过程有点小漫长
![](https://img.haomeiwen.com/i6624077/10ab24db13232bab.png)
就这样创建成功了
初始化工程目录如下,由于我只有一个盘符C盘
![](https://img.haomeiwen.com/i6624077/db95385592eeb857.png)
创建成功了去Webstorm里面
![](https://img.haomeiwen.com/i6624077/0a97e042e0cd9459.png)
![](https://img.haomeiwen.com/i6624077/71178e21faeb6b6a.png)
![](https://img.haomeiwen.com/i6624077/28d2948ace4ce746.png)
1.1用你的AndroidStudio打开此工程
1.2Webstorm运行ReactDemo,我的被窝改过了,没有改过的运行Android就行了
![](https://img.haomeiwen.com/i6624077/43262e19d3fb0299.png)
运行效果如下所示
![](https://img.haomeiwen.com/i6624077/e03c5dee8b83fade.png)
就这样完成了