關於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打開我的項目之後目錄:
這時候我們要運行我們的項目,前提你安裝過上面的一個插件(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。好了!!!!
最後貼出中文官網:
這兩篇主要記錄下開發前期的一些小操作。