React Native常用IDE推薦與安裝配置

作者： cfscc
發布時間：2020-05-13
1014 次瀏覽
暫無評論
3964字數
分類：程序代碼

Loading...

React Native常用IDE推薦與安裝配置
（一）前言
上一講提到了React Native框架安裝和運行,以及創建了一個項目并介紹這個項目結構。這樣介紹項目項目結構其實極其不方便，這一節將介紹開發React Native常用的IDE. 所謂工欲善其事必先利其器，做React Native開發也和其他應用開發一樣?，F在推薦使用幾款比較好的IDE: sublime、webstorm以及官網推薦的Nuclide、VSCode。下面主要介紹其中的三款IDE—— webstorm、Nuclide以及VSCode。

（二）Nuclide常規安裝以及配置
Nuclide是Facebook專門為React開發的IDE,官網推薦。但是Nuclide是在Atom基礎上面提供了一系列統一的插件。所以我們需要首先安裝Atom。 
Nuclide項目官方地址:https://github.com/facebook/nuclide

2.1 Atom安裝
Atom是一個開源版本的編輯器，非常強大以及完美體驗，Atom最大的特色就是可以安裝很多的插件來完成我們的需求。官網地址:https://atom.io/ 去官網下載安裝即可。

2.2 Nuclide 安裝（不推薦安裝方式）
Atom已經安裝成功了，下面開始安裝Nuclide，直接打開Atom軟件，點擊Atom-> Preferences打開Setting，然后點擊install，輸入nuclide-installer搜索，進行下載即可，如下圖： 
![2020-05-12T16:17:23.png][1]

這種方式我們是選擇插件下載進行安裝，另外的一種方式我們可以直接在命令行執行以下命令(利用Atom的包管理器apm安裝):

apm install nuclide
1
最后重啟一下Atom即可。不過這兩種方式都不太推薦大家使用，這兩種方式一方面是安裝速度比較慢，而且下載安裝完之后Atom會很卡，然后提示找不到Nuclide相關模塊。

2.3 Nuclide安裝（強烈推薦安裝方式）
Nuclide項目官方地址：https://github.com/facebook/nuclide，我們知道該項目是Facebook官方推薦的，當然我們也給開發者提供了一種源代碼編譯安裝的方式。使用起來非常簡單：

git clone https：//github.com/facebook/nuclide.git
cd nuclide
npm install
apm link
1
2
3
4
終端安裝截圖如下： 
![2020-05-12T16:17:38.png][2]
這樣就安裝完成，可以開始寫React Native項目代碼了。至于項目初始化以及編譯運行方法，大家可以看前一篇文章哦！這里不再贅述。

(三) WebStorm IDE 介紹和安裝
我相信做工Web前段的童鞋們，肯定對WebStorm IDE 非常熟悉，WebStorm是jetbrains公司旗下一款JavaScript開發工具。被廣大中國JS開發者譽為“Web前端開發神奇”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。該IDE官網地址:https://www.jetbrains.com/webstorm/ 。該新版本已經支持了React了，所以在現如今的開發階段WebStorm已經算是支持性最好的IDE了，大家有興趣可以下載使用一下哦！但是…….要收費的，要收費的。土豪忽略，至于破解版本看你自己了。 
![2020-05-12T16:17:52.png][3]
![2020-05-12T16:18:00.png][4]
最后通過WebStorm打開我們一個已經存在的React Native項目。 
![2020-05-12T16:18:09.png][5]

(四)VSCode安裝以及插件配置
直接講VSCode安裝實在突兀，先介紹一下VSCode。

在 Build 2015 大會上，微軟除了發布了 Microsoft Edge 瀏覽器和新的 Windows 10 系統外，最大的驚喜莫過于宣布推出免費跨平臺的 Visual Studio Code 編輯器了！

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之作……

4.1 安裝Visual Studio Code
下載地址：https://code.visualstudio.com/Updates 
下載下來直接拖到Application中就可以使用了。

4.2 安裝VSCode擴展工具
如果在VSCode上開發React Native，安裝一個擴展工具可以帶來極大的方便以及提高開發效率。該插件可以提供以下這些功能：調試代碼、命令面板終端快速執行Reac-native命令、代碼智能補全、React Native API以及React對象搜索瀏覽。 
使用效果演示如下： 
![2020-05-12T16:18:25.png][6]
安裝步驟： 
打開VSCode軟件，按 Fn+F1; 
鍵入 ext install React Native； 
點擊安裝； 
重啟VSCode。截圖如下： 
![2020-05-12T16:18:35.png][7]

如果你沒有安裝React-native，請參考前面的文章安裝。React-native-cli要求在0.1.10以上版本；React-Native要求在0.19以上版本。

4.3 使用VSCode于React Native項目
第一：調試配置 
首先導入項目到VSCode中，點擊debugger icon 這里寫圖片描述，然后點擊配置icon 這里寫圖片描述，然后選擇React Native。如下圖： 
![2020-05-12T16:19:02.png][8]
VSCode將在項目中生成一個 launch.json，這個文件包含一些默認配置，例如下面所顯示： 
![2020-05-12T16:19:12.png][9]
你可以修改哪些配置或者添加新的配置到這個列表中。你也可以利用在配置文件中其它的字段，例如，你能修改 target 字段指定iOS調試的模擬器

第二：開始調試（Start debug session） 
為了開始調試，通過配置下拉框選擇一個調試項，然后點擊運行箭頭或者Fn+F5按鍵。這一步相當于android平臺運行的運行方式：react-native run-native； 
iOS平臺在Xcode中運行項目。 
如圖所示： 
![2020-05-12T16:19:26.png][10]
開發者可以調試Android平臺的模擬器與設備，但是iOS平臺的模擬器也是使用Fn + F5，但是iOS平臺真機調試需要手動配置一些東西。配置如下： 
調試iOS真機（Debugging on iOS device）：

需要安裝 ideviceinstaller 命令行：brew install ideviceinstaller 
配置launch.json文件，設置target為“device”
根據這篇文章真機配置 https://facebook.github.io/react-native/docs/running-on-device-ios.html#accessing-development-server-from-device 去修改jsCodeLocation IP在你的應用中
然后點擊運行或者 Fn+F5 運行程序。
搖一搖設備，打開開發者菜單，并且選擇”Debug in Chrome”
4.4 命令面板終端中使用React Native命令
在命令面板中，可以匹配React Native類型命令，并且選擇命令，如下圖所示: 
![2020-05-12T16:19:57.png][11]

運行Android命令，觸發react-native run-android 來進行打開android app
運行iOS命令，觸發react-native run-ios來進行打開并且在iOS模擬器中運行(iPhone 6)
Packager命令，可以允許我們打開/關閉React-Packager
4.5 使用智能提醒（Using IntelliSense）
代碼智能提醒可以幫助我們發現React Native中相關對象,方法以及參數，具體效果如下圖所示： 
![2020-05-12T16:20:11.png][12]

4.6 開啟智能提醒
【注意】：這部分涉及到老版本的VSCode和React Native工具。最新版的VSCode（1.1.1）支持智能提醒For Salsa，以前的老版本屬于測試階段，需要開啟智能提醒。這些指導說明支持老版本（<= 0.10.9）

React Native智能提醒功能依賴于支持JSX語法的實驗性特性在VS Code，打開了這些特性，你將會立馬看到如下一個提醒當你打開一個React Native項目。如圖： 
![2020-05-12T16:20:28.png][13]

該提醒是一次性的開啟JSX支持，我們需要重啟VS Code來讓該智能提醒功能生效。同時我們可以驗證是否已經正確安裝，如果顯示如下的狀態條，就表示當前已經開啟了智能提醒功能。 
![2020-05-12T16:20:52.png][14]

一旦你遵循以上的步驟進行開啟智能提醒功能，你就可以在代碼編輯器中看到React Native庫中的對象,方法,參數相關提醒了。

下面是一些開啟JSX支持，VS Code的配置做了一些如下修改:

①.環境變量VSCODE_TSJS=1設置來開啟Salsa

②.Salsa需要最起碼TypeScript 1.8版本，但是最終1.8發布版本還不可用。插件typescript@nexet安裝在~/.vscode

③.在.vscode目錄中生成一個setting.json文件，文件中使用typescript.tsdk來指向typescript@next安裝的位置

④.在項目根目錄中創建tsconfig.json文件，并且配置allowsJs:true來允許TypeScript來處理JavaScript文件

⑤.React Native的Typing復制到.vscode目錄中

4.7 存在已知問題：
下面列表一下，在使用本插件中可能會遇到的一些已知的問題。

①.調試器不能關閉斷點： 該調試器僅僅會在通過VS Code打開packager服務中運行。如果packager在VS Code外部運行需要關閉packager

②.’adb’ 命令沒有找到: 如果你遇到adb:command not founc，那么你需要進行配置android環境變量了。最好把PATH和ANDROID_HOME環境變量都配置上.

③.目標iPhone 6不工作:當使用iPhone6運行app的時候，該為一個已知的問題，詳細請點擊:

最后這里這邊  https://github.com/Microsoft/vscode-react-native/issues?q=is:open%20is:issue%20label:preview-known-issues 查看已經解決的所有的問題。

轉載自：http://www.lcode.org/vscode-react-native-tools/

[1]: http://www.matrixbk.com/usr/uploads/2020/05/3748206939.png
  [2]: http://www.matrixbk.com/usr/uploads/2020/05/2668209305.png
  [3]: http://www.matrixbk.com/usr/uploads/2020/05/3188119187.png
  [4]: http://www.matrixbk.com/usr/uploads/2020/05/3041876700.png
  [5]: http://www.matrixbk.com/usr/uploads/2020/05/3569172261.png
  [6]: http://www.matrixbk.com/usr/uploads/2020/05/1271936327.png
  [7]: http://www.matrixbk.com/usr/uploads/2020/05/1229741227.png
  [8]: http://www.matrixbk.com/usr/uploads/2020/05/3269930816.png
  [9]: http://www.matrixbk.com/usr/uploads/2020/05/1438685426.png
  [10]: http://www.matrixbk.com/usr/uploads/2020/05/3635639078.png
  [11]: http://www.matrixbk.com/usr/uploads/2020/05/4120782440.png
  [12]: http://www.matrixbk.com/usr/uploads/2020/05/2411586327.png
  [13]: http://www.matrixbk.com/usr/uploads/2020/05/2200760618.png
  [14]: http://www.matrixbk.com/usr/uploads/2020/05/3417053483.png

最后修改：

? 允許規范轉載

如果覺得我的文章對你有用，請隨意贊賞

發表評論取消回復
使用cookie技術保留您的個人信息以便您下次快速評論，繼續評論表示您已同意該條款

評論 *

私密評論

名稱 *

??

郵箱

地址

React Native常用IDE推薦與安裝配置

cfscc ? 2020 年 05 月 13 日

Loading...

React Native常用IDE推薦與安裝配置
（一）前言
上一講提到了React Native框架安裝和運行,以及創建了一個項目并介紹這個項目結構。這樣介紹項目項目結構其實極其不方便，這一節將介紹開發React Native常用的IDE. 所謂工欲善其事必先利其器，做React Native開發也和其他應用開發一樣?，F在推薦使用幾款比較好的IDE: sublime、webstorm以及官網推薦的Nuclide、VSCode。下面主要介紹其中的三款IDE—— webstorm、Nuclide以及VSCode。

（二）Nuclide常規安裝以及配置
Nuclide是Facebook專門為React開發的IDE,官網推薦。但是Nuclide是在Atom基礎上面提供了一系列統一的插件。所以我們需要首先安裝Atom。 
Nuclide項目官方地址:https://github.com/facebook/nuclide

2.1 Atom安裝
Atom是一個開源版本的編輯器，非常強大以及完美體驗，Atom最大的特色就是可以安裝很多的插件來完成我們的需求。官網地址:https://atom.io/ 去官網下載安裝即可。

2.2 Nuclide 安裝（不推薦安裝方式）
Atom已經安裝成功了，下面開始安裝Nuclide，直接打開Atom軟件，點擊Atom-> Preferences打開Setting，然后點擊install，輸入nuclide-installer搜索，進行下載即可，如下圖： 
![2020-05-12T16:17:23.png][1]

這種方式我們是選擇插件下載進行安裝，另外的一種方式我們可以直接在命令行執行以下命令(利用Atom的包管理器apm安裝):

apm install nuclide
1
最后重啟一下Atom即可。不過這兩種方式都不太推薦大家使用，這兩種方式一方面是安裝速度比較慢，而且下載安裝完之后Atom會很卡，然后提示找不到Nuclide相關模塊。

2.3 Nuclide安裝（強烈推薦安裝方式）
Nuclide項目官方地址：https://github.com/facebook/nuclide，我們知道該項目是Facebook官方推薦的，當然我們也給開發者提供了一種源代碼編譯安裝的方式。使用起來非常簡單：

git clone https：//github.com/facebook/nuclide.git
cd nuclide
npm install
apm link
1
2
3
4
終端安裝截圖如下： 
![2020-05-12T16:17:38.png][2]
這樣就安裝完成，可以開始寫React Native項目代碼了。至于項目初始化以及編譯運行方法，大家可以看前一篇文章哦！這里不再贅述。

(三) WebStorm IDE 介紹和安裝
我相信做工Web前段的童鞋們，肯定對WebStorm IDE 非常熟悉，WebStorm是jetbrains公司旗下一款JavaScript開發工具。被廣大中國JS開發者譽為“Web前端開發神奇”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。該IDE官網地址:https://www.jetbrains.com/webstorm/ 。該新版本已經支持了React了，所以在現如今的開發階段WebStorm已經算是支持性最好的IDE了，大家有興趣可以下載使用一下哦！但是…….要收費的，要收費的。土豪忽略，至于破解版本看你自己了。 
![2020-05-12T16:17:52.png][3]
![2020-05-12T16:18:00.png][4]
最后通過WebStorm打開我們一個已經存在的React Native項目。 
![2020-05-12T16:18:09.png][5]

(四)VSCode安裝以及插件配置
直接講VSCode安裝實在突兀，先介紹一下VSCode。

在 Build 2015 大會上，微軟除了發布了 Microsoft Edge 瀏覽器和新的 Windows 10 系統外，最大的驚喜莫過于宣布推出免費跨平臺的 Visual Studio Code 編輯器了！

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之作……

4.1 安裝Visual Studio Code
下載地址：https://code.visualstudio.com/Updates 
下載下來直接拖到Application中就可以使用了。

4.2 安裝VSCode擴展工具
如果在VSCode上開發React Native，安裝一個擴展工具可以帶來極大的方便以及提高開發效率。該插件可以提供以下這些功能：調試代碼、命令面板終端快速執行Reac-native命令、代碼智能補全、React Native API以及React對象搜索瀏覽。 
使用效果演示如下： 
![2020-05-12T16:18:25.png][6]
安裝步驟： 
打開VSCode軟件，按 Fn+F1; 
鍵入 ext install React Native； 
點擊安裝； 
重啟VSCode。截圖如下： 
![2020-05-12T16:18:35.png][7]

如果你沒有安裝React-native，請參考前面的文章安裝。React-native-cli要求在0.1.10以上版本；React-Native要求在0.19以上版本。

4.3 使用VSCode于React Native項目
第一：調試配置 
首先導入項目到VSCode中，點擊debugger icon 這里寫圖片描述，然后點擊配置icon 這里寫圖片描述，然后選擇React Native。如下圖： 
![2020-05-12T16:19:02.png][8]
VSCode將在項目中生成一個 launch.json，這個文件包含一些默認配置，例如下面所顯示： 
![2020-05-12T16:19:12.png][9]
你可以修改哪些配置或者添加新的配置到這個列表中。你也可以利用在配置文件中其它的字段，例如，你能修改 target 字段指定iOS調試的模擬器

第二：開始調試（Start debug session） 
為了開始調試，通過配置下拉框選擇一個調試項，然后點擊運行箭頭或者Fn+F5按鍵。這一步相當于android平臺運行的運行方式：react-native run-native； 
iOS平臺在Xcode中運行項目。 
如圖所示： 
![2020-05-12T16:19:26.png][10]
開發者可以調試Android平臺的模擬器與設備，但是iOS平臺的模擬器也是使用Fn + F5，但是iOS平臺真機調試需要手動配置一些東西。配置如下： 
調試iOS真機（Debugging on iOS device）：

需要安裝 ideviceinstaller 命令行：brew install ideviceinstaller 
配置launch.json文件，設置target為“device”
根據這篇文章真機配置 https://facebook.github.io/react-native/docs/running-on-device-ios.html#accessing-development-server-from-device 去修改jsCodeLocation IP在你的應用中
然后點擊運行或者 Fn+F5 運行程序。
搖一搖設備，打開開發者菜單，并且選擇”Debug in Chrome”
4.4 命令面板終端中使用React Native命令
在命令面板中，可以匹配React Native類型命令，并且選擇命令，如下圖所示: 
![2020-05-12T16:19:57.png][11]

運行Android命令，觸發react-native run-android 來進行打開android app
運行iOS命令，觸發react-native run-ios來進行打開并且在iOS模擬器中運行(iPhone 6)
Packager命令，可以允許我們打開/關閉React-Packager
4.5 使用智能提醒（Using IntelliSense）
代碼智能提醒可以幫助我們發現React Native中相關對象,方法以及參數，具體效果如下圖所示： 
![2020-05-12T16:20:11.png][12]

4.6 開啟智能提醒
【注意】：這部分涉及到老版本的VSCode和React Native工具。最新版的VSCode（1.1.1）支持智能提醒For Salsa，以前的老版本屬于測試階段，需要開啟智能提醒。這些指導說明支持老版本（<= 0.10.9）

React Native智能提醒功能依賴于支持JSX語法的實驗性特性在VS Code，打開了這些特性，你將會立馬看到如下一個提醒當你打開一個React Native項目。如圖： 
![2020-05-12T16:20:28.png][13]

該提醒是一次性的開啟JSX支持，我們需要重啟VS Code來讓該智能提醒功能生效。同時我們可以驗證是否已經正確安裝，如果顯示如下的狀態條，就表示當前已經開啟了智能提醒功能。 
![2020-05-12T16:20:52.png][14]

一旦你遵循以上的步驟進行開啟智能提醒功能，你就可以在代碼編輯器中看到React Native庫中的對象,方法,參數相關提醒了。

下面是一些開啟JSX支持，VS Code的配置做了一些如下修改:

①.環境變量VSCODE_TSJS=1設置來開啟Salsa

②.Salsa需要最起碼TypeScript 1.8版本，但是最終1.8發布版本還不可用。插件typescript@nexet安裝在~/.vscode

③.在.vscode目錄中生成一個setting.json文件，文件中使用typescript.tsdk來指向typescript@next安裝的位置

④.在項目根目錄中創建tsconfig.json文件，并且配置allowsJs:true來允許TypeScript來處理JavaScript文件

⑤.React Native的Typing復制到.vscode目錄中

4.7 存在已知問題：
下面列表一下，在使用本插件中可能會遇到的一些已知的問題。

①.調試器不能關閉斷點： 該調試器僅僅會在通過VS Code打開packager服務中運行。如果packager在VS Code外部運行需要關閉packager

②.’adb’ 命令沒有找到: 如果你遇到adb:command not founc，那么你需要進行配置android環境變量了。最好把PATH和ANDROID_HOME環境變量都配置上.

③.目標iPhone 6不工作:當使用iPhone6運行app的時候，該為一個已知的問題，詳細請點擊:

最后這里這邊  https://github.com/Microsoft/vscode-react-native/issues?q=is:open%20is:issue%20label:preview-known-issues 查看已經解決的所有的問題。

轉載自：http://www.lcode.org/vscode-react-native-tools/

[1]: http://www.matrixbk.com/usr/uploads/2020/05/3748206939.png
  [2]: http://www.matrixbk.com/usr/uploads/2020/05/2668209305.png
  [3]: http://www.matrixbk.com/usr/uploads/2020/05/3188119187.png
  [4]: http://www.matrixbk.com/usr/uploads/2020/05/3041876700.png
  [5]: http://www.matrixbk.com/usr/uploads/2020/05/3569172261.png
  [6]: http://www.matrixbk.com/usr/uploads/2020/05/1271936327.png
  [7]: http://www.matrixbk.com/usr/uploads/2020/05/1229741227.png
  [8]: http://www.matrixbk.com/usr/uploads/2020/05/3269930816.png
  [9]: http://www.matrixbk.com/usr/uploads/2020/05/1438685426.png
  [10]: http://www.matrixbk.com/usr/uploads/2020/05/3635639078.png
  [11]: http://www.matrixbk.com/usr/uploads/2020/05/4120782440.png
  [12]: http://www.matrixbk.com/usr/uploads/2020/05/2411586327.png
  [13]: http://www.matrixbk.com/usr/uploads/2020/05/2200760618.png
  [14]: http://www.matrixbk.com/usr/uploads/2020/05/3417053483.png

天天日天天干天天_黄片免费在线播放_性开放按摩av片_18禁裸体黑丝美女自慰网站。