ReactNative+Webstorm开发环境搭建(基于And
2018-07-01 本文已影响0人
Windows_XP
前言:
WebStorm的开发环境搭建可以参考https://blog.csdn.net/calvin_zhou/article/details/79427566
本文目的主要记录本地创建一个ReactNative工程并运行出来一个HelloWord程序
1.nodejs官方网站下载并安装https://nodejs.org/zh-cn/
![](https://img.haomeiwen.com/i12049851/741439407c28dfa0.png)
2.配置nodejs环境变量
![](https://img.haomeiwen.com/i12049851/931a33798354ef20.png)
![](https://img.haomeiwen.com/i12049851/80333098612000f8.png)
测试是否安装完成
打开cmd
输入:node -v
![](https://img.haomeiwen.com/i12049851/afbe8004f8c1e0cf.png)
3.配置npm源
由于国外的npm服务器下载太慢了,因此配置国内的服务器如下:
在图4的cmd窗口中
输入:npm config set registry https://registry.npm.taobao.org --global
输入:npm config set disturl https://npm.taobao.org/dist --global
![](https://img.haomeiwen.com/i12049851/3e42dabb86faf403.png)
配置完成
4.安装react native环境
在图5的cmd窗口中
输入:npm install -g react-native-cli
![](https://img.haomeiwen.com/i12049851/feaa9fa8884d4a5a.png)
5.新建ReactNative工程
在图6的cmd窗口中
切换到我需要新建工程的目录中,这里根据自己情况选择创建工程位置
输入:e:
输入:cd E:\ReactNativeWork
新建一个react-native工程,工程名为Demo
输入:react-native init Demo
![](https://img.haomeiwen.com/i12049851/253a61841f05fba2.png)
![](https://img.haomeiwen.com/i12049851/d20e84937b954706.png)
![](https://img.haomeiwen.com/i12049851/07197f7f3a01ba7c.png)
6.把创建的工程中的android这个目录作为工程在AndroidStudio中打开,并把 HelloWord 跑起来
这里就不多说了,根据自己的AndroidStudio开发环境进行调试,最终只要跑起来就行了
![](https://img.haomeiwen.com/i12049851/27b2e68f11d2da1d.png)
7.开启本地服务器
在WebStorm中输入:npm start
![](https://img.haomeiwen.com/i12049851/2c8c9012037b5f31.png)
然后再在AndroidStudio中发布一次就行了
![](https://img.haomeiwen.com/i12049851/b7a057c8202ca9b7.png)
成功跑起!
ps:我这里用的不是最初创建的Demo工程,是我自己的一个工程
我也是才接触ReaceNative,有些理解不到位的地方欢迎指正,
遇到问题可留言,在我能解决的范围内一定回复