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

關於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。好了!!!!


最後貼出中文官網:

中文官網


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

發佈了73 篇原創文章 · 獲贊 61 · 訪問量 34萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章