react native 之 webstorm开发(windows)

时间:2024-04-05 13:54:15

前言:作为Android开发的老司机,前端时间我在windows上面把reactnative项目做了一个流程的研究,同时也把相关的博客给贴了出去。今天考虑到reactnative的js的书写需要开发工具,就看了一下网上的各种资料,最后选了webstorm作为自己开发reactnative的工具来走了一下reactnative项目js的书写流程

我选择webstorm的原因主要是它和Androidstudio的使用风格一致而且也是为了保持和公司项目组的开发工具的统一。该篇文章讲的就是webstorm,如果对面的你想要使用其他的工具请忽略此文章节省自己的宝贵的时间。


下面开始正题了,大家请上车了。。。


先说一下webstorm的安装:(由于官网的webstorm是付费的,所以这里说的**版的使用)


1.去webstorm  官网下载webstorm版本进行windows傻瓜式(next)安装。

2.用记事本方式打开C:\Windows\System32\drivers\etc目录下的“hosts”,将“0.0.0.0account.jetbrains.com”添加到hosts文件中,然后保存退出。(进行webstorm**时需要这个配置)

3.用浏览器打开网页    http://idea.lanyus.com/    在网页里面点击页面的  获取***  按钮(页面里面会有相关显示该***有效期为一年),弹出***弹框,复制里面的***。

react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)


4.在webstorm安装以后,打开时会有需要**的页面,这时候将***粘贴到webstorm的**码里面,点击确定按钮就可以打开webstorm软件进行使用了。

react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)


5.打开webstorm时选择你的reactnative项目的目录,直接打开RN项目就行了,就可以在webstorm里面看到项目的目录结构了,这时就可以用webstorm对js文件进行编辑了。


接下来就是对webstorm的一些设置:


由于webstorm和Androidstudio都是一家公司出的,风格和使用基本是相同的,所以这里只是简单说一下用webstorm对reactnative开发的一些简单的设置。


1.开发工具页面字体的设置。

react native 之 webstorm开发(windows)

react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)


2.在工具页面中显示js代码时的报错的设置,该设置完成后,报错就会消失了。

react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)


3.用webstorm编辑RN代码时的自动提示功能的设置。


(1)下载ReactNative.jar文件,进入你想存储这个文件的目录,按住shift+鼠标右键,选择“在此处打开命令窗口”。

(2)在命令窗口中输入  git clonehttps://github.com/virtoolswebplayer/ReactNative-LiveTemplate 命令,下载文件。(如果没有配置git的环境变量,请先配置git的环境变量)

(3)打开webstorm, 选择file-->ImportSettings...-->在刚刚下载的文件夹里找到ReactNative.jar选择它-->OK

(4)提示重启webstrom,重启,搞定


4.将npm的启动js服务(package)的命令配置在webstorm上面

react native 之 webstorm开发(windows)react native 之 webstorm开发(windows)

react native 之 webstorm开发(windows)

react native 之 webstorm开发(windows)

react native 之 webstorm开发(windows)

react native 之 webstorm开发(windows)

配置完以后在webstorm里面点击run运行的时候选择你的npm命令的名字运行就可以直接启动js的服务了,还是挺方便的。(在webstorm的命令窗口里也是可以看到命令的执行日志过程的)


到此为止,用webstorm对reactnative的开发就介绍完了,see  you


reactnative系列之交互篇