配置React-Native开发工具——WebStorm下载、**与配置

Z时代
2024-01-10
分类：综合

react

- - 目录
  - 正文
  - 为什么推荐WebStorm
  - 还有哪些IDE开发工具可以选择
  - 安装WebStorm
    - - 1 下载WebStorm
        2 安装步骤以Windows操作系统为例
        3 启动与**WebStorm
        4 打开项目
  - 配置WebStorm
    - - 1 添加npm配置
        2 设置JSX语法
        3 配置React Native智能提示

正文

通过React-Native开发环境搭建一节完成了开发环境的搭建，那么我们在做React-Native开发的时候都会用到哪些开发工具呢？在这里强烈推荐大家使用WebStorm和Android Studio/XCode来协同完成React-Native应用开发。

1.为什么推荐WebStorm

WebStorm是JetBrains公司旗下的一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
我们选择WebStorm另外一个原因是，新版本的WebStorm已经全面支持了RN。

2.还有哪些IDE开发工具可以选择

除了WebStorm以外，大家一般还会使用Sublime，Atom等等开发工具，但是根据网友的反馈这些工具都有一个共同的缺点：不能实时编译。关于开发工具大家有什么疑问欢迎在评论区讨论。

3.安装WebStorm

3.1 下载WebStorm
点击WebStorm下载传送门进入官方网站下载页面，选择对应的操作系统，点击下载按钮即可（请参考下图）。
3.2 安装步骤（以Windows操作系统为例）

3.3 启动与**WebStorm
启动WebStorm，会看到设置提示框：

在新版本中会出现License Agreement提示框，按下图操作即可：

接下来会出现**提示框：
最新版本的**方法，请参考：最新**方法【如果您比较有钱，强烈建议您购买正版。】
如果当前的最新版本网上没有**方法，可以使用以下链接下载2017.2.2版本：
下载链接: https://pan.baidu.com/s/1mjiBMAW 密码: i74p
2017.2.2版本**方法：
在**提示框中选择“license server”，输入：http://idea.imsxm.com/，点击**即可。
3.4 打开项目
WebStorm**成功后会进入到启动页面，点击“Open”按钮打开React-Native项目

选择React-Native项目所在的目录

项目成功后进入工作台（初次运行可能会比较慢）

4.配置WebStorm

4.1 添加npm配置
在打开的项目中，可以看到右上角的运行按钮是灰色的，需要按照以下的步骤添加npm配置

4.2 设置JSX语法
设置方法：File -> Settings -> Language & Frameworks -> JavaScript

添加React-Native的相关库
设置路径：File -> Settings -> Language & Frameworks -> JavaScript -> Libraries

4.3 配置React Native智能提示
我们在是WebStorm开发React-Native时，会发现缺少React-Native框架的关键字只能提示，有个大神写了一个开源插件，完美的解决了这个问题。
插件的Github地址：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
下载方法：git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

安装方法：File -> Import Settings -> 选择ReactNative.jar

重启WebStorm后，直接输入组件或 Api 名称的首字母, 比如想要 View ,只要输入 V自动提示代码里就会看到 View

StyleSheet属性提示
首先按下 Ctrl + J （macOs：Command + J） , 然后输入属性名的首字母
如: 输入 f ,会自动提示 fontSize,fontStyle