React Native 環境搭建 初始化項目 運行 調試_React

關於RN，前些日子寫過一篇初始化項目的，本文在項目已經構建完畢基礎上，下面貼出上篇文章串連：

Hello RN

按照上面文章走過一遍之後我們應該就運行起來了，但是RN的開發IDE用什麼呢。

看過一些文章，也做過一些嘗試：

1.官方推薦是ATMO+Nuclide。百度搜Atom官網，去下載即可，下載之後開啟安裝幾個開發常用的外掛程式：

open-in-browser

autocomplete-paths

atom-html-preview

2.WebStorm（個人比較喜歡他們公司的幾款軟體），但是還是不如下面這個方便，快捷。

3.Sublime Text 3.這個就厲害了，確實很方便。只需要安裝幾個外掛程式：

ReactJS : 支援React開發，代碼提示，高亮顯示

Emmet ：前端開發必備。

Terminal : 在sublime中開啟終端並定位到目前的目錄，神器，mac下的快速鍵為：command+shift+T

具體安裝步驟參考下面大神的部落格：

Sublime 外掛程式安裝

其中靜態代碼檢查那裡有些問題，請看下面大神的文章，寫的很詳細，有問題我們再來討論。

靜態代碼檢查外掛程式配置

下面就是我用Sublime開啟我的項目之後目錄：

這時候我們要運行我們的項目，前提你安裝過上面的一個外掛程式（Terminal）後，按command+shift+T，就會開啟終端，直接進入到你項目目錄下。

沒安裝也不要緊，開啟終端一步兩步一步兩步進入到你項目目錄下。

此時，我們先運行到iOS模擬器上：

終端輸入react-native run-ios斷行符號，等待編譯，就可以運行到我們ios模擬器上了。

這時候我們改變目錄最外層的index.ios.js檔案中的代碼：

只改了原來的幾句話。

現在想重新整理模擬器上我們已經啟動並執行項目按照原生開發就是：

重新編譯運行，而RN我們只需要在模擬器上（iOS）按command+r即可。

如果不好使，你檢查下你模擬器的鍵盤響應是否關了，下圖：

這樣隨時就可以重新整理我們的應用了。

下面看看Android，由於本人電腦記憶體快滿了，所以卸載了很多應用（包括Android的genymotion），所以我用的是真機。

串連好電腦之後，在剛才的終端輸入：react-native run-android 斷行符號 編譯。

運行到手機之後，剛才我們在index.ios.js檔案裡改了幾句話，現在我們在index.android.js檔案中隨便也改幾句。

這時候重新整理就是，晃動真機的螢幕，會出現一個彈窗，第一個選項就是Reload，重新整理。。。。

可能會遇到紅螢幕的一個錯誤 could not connect to development server。

需要我們給應用設定一下本機ip：8081

下面貼出mac擷取本機ip方法，建立個終端視窗，輸入：

ifconfig | grep "inet " | grep -v 127.0.0.1

就出來了。

然後怎麼設定呢。還是晃動手機螢幕，菜單裡Dev Settings ----> Debug server host & port for device

點擊之後會有個輸入的彈窗，你輸入你剛才擷取的原生ip:8081。

確定之後返回返回返回，重新Reload。好了。。。。

最後貼出中文官網：

中文官網

這兩篇主要記錄下開發前期的一些小操作。