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

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

以上是 配置React-Native开发工具——WebStorm下载、**与配置 的全部内容, 来源链接: utcz.com/z/383692.html

回到顶部