React-Native 入門環境過程

今天在配置RN環境,歷經五六個小時的奮斗截至目前,終于成功運行了,按照慣例,總結匯總一下這一路走過來的坑和注意事項。

環境配置

這是基礎,也是最重要的一步。這個不要胡亂去看別人的博客,老老實實的看官方的說明文檔,一步一個坑,跳進去再爬出來。

中文版本:

http://reactnative.cn/docs/0.41/getting-started.html#content

英文版本:

http://facebook.github.io/react-native/docs/getting-started.html

按照上面介紹的步驟,一步一步來安裝。其中中文經過整理,里面的那些必須要安裝,那些可以不用安裝都作了說明,還是很不錯的。

我前面幾個步驟是按照英文來進行的:

brew install node

brew install watchman

沒毛病,系統很開心的告訴我成功了,接下來開始安裝React Native CLI。

這個時候我賤賤的去看了中文的手冊,


就是這句

想著人家都很有好的建議設置鏡像了,方法什么的也都說了,不設置是不是對不起人家,就吧唧吧唧的執行了這兩個命令,然后第一個坑就在前面等著我了。

開始執行

npm install-g react-native-cli

妥妥的告訴我解析不了“react-native-cli”(錯誤已經過去了,當時也刪除了,電腦重啟了一下,無法放出截圖了),我一看知道這個是加載不了遠程文件,第一反應,靠不應該啊,我能上網呀,而且這個文件遠程應該存在的,要不然這么大一個網站放一個不存在的文件那的耽誤多少人的事情(不存在應該會提示文件不存在),然后就為這個問題來回折騰,會不會是NPM不對?網上看到刪了重裝,咱也是一個敢想敢干的人,吧唧執行uninstall刪了,重裝,完了裝哪了,為什么NPM命令找不到了,一路搜,一路找,原來他沒有裝在

/usr/local/lib/node_modules

同時/usr/local/bin/npm也不存在,所以就沒有該命令,當然我也很茫然不知道怎么出現了這種情況,但是這么也不是一個辦法呀,再刪!!!順手把note也刪了,重新按照英文的文檔來安裝,但是在安裝react-native-cli還是報錯。上午的時候問旁邊的同事,他說他也是按照這個流程走的沒遇到這種情況,一切都很順利呀~ 我就又開始了我的糾結之旅。

下午吃完飯,我同事說他的也不行了,然后看了鏡像地址,和我說會不會公司網把taobao字樣的域名屏蔽了,wtf,作為一個新人誰告訴我公司針對這些網站做了屏蔽。SO又重新設置了鏡像

npm config set registryhttp://registry.cnpmjs.org

妥妥的,可以了!!!

安裝運行

作為一個資深的android工程師,Android環境肯定已經安裝了,所以開始init工程

react-nativeinit AwesomeProject

妥妥的沒有問題,繼續到該工程下,開始進行運行,編譯失敗,提示

SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable

哦,這個簡單,ANDROID_HOME沒有配置,按照說明配置了一下


經過source ~/.profile讓起生效,再次編輯安裝,仍然提示該錯誤。這個時候想起一句話“重啟可以解決很多無法解釋的問題”,重啟、上個廁所,果然,可以了,看到完成的apk的時候,內心滿滿的是幸福哈。

作為一個有錢的大公司的員工,早就告別了使用虛擬機的時代,直接真機上手。運行看到血紅血紅的界面,連不上服務器,然后聽同事說你搖一搖試試,搖一搖出現了設置界面,好神奇的功能,選擇

Debug server host for device

然后設置電腦的IP和端口(8081),然后重新reload,看到了喜人的

Welcome to React Native

搖一搖手機后,選擇開始熱更新,然后在每一次寫完代碼執行保存命令后,它會自動的更新到手機上。

我使用的是WebStorm進行代碼開發的(網上有破解方法),它會自動保存代碼,每一次按下command+s后,手機會自動加載代碼。

ps:感覺開始熱更新后,他有一個定時加載的機制,有時候代碼寫一半沒有保存手機上就自動同步了。同時就算開始了熱更新,或者reload,有時候也會有不及時現象,這個時候可能需要重新編譯運行一下,記住:重啟能夠解決大部分科學無法解釋的事情。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容