目錄

• • • 目錄
    • 正文
    • 為什么推薦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下载、激活与配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。