今天在配置RN環(huán)境踩官,歷經(jīng)五六個小時的奮斗截至目前,終于成功運行了碱呼,按照慣例蒙挑,總結(jié)匯總一下這一路走過來的坑和注意事項。
環(huán)境配置
這是基礎(chǔ)愚臀,也是最重要的一步忆蚀。這個不要胡亂去看別人的博客,老老實實的看官方的說明文檔姑裂,一步一個坑馋袜,跳進去再爬出來。
中文版本:
http://reactnative.cn/docs/0.41/getting-started.html#content
英文版本:
http://facebook.github.io/react-native/docs/getting-started.html
按照上面介紹的步驟舶斧,一步一步來安裝欣鳖。其中中文經(jīng)過整理,里面的那些必須要安裝茴厉,那些可以不用安裝都作了說明泽台,還是很不錯的。
我前面幾個步驟是按照英文來進行的:
brew install node
brew install watchman
沒毛病呀忧,系統(tǒng)很開心的告訴我成功了师痕,接下來開始安裝React Native CLI。
這個時候我賤賤的去看了中文的手冊而账,
想著人家都很有好的建議設(shè)置鏡像了,方法什么的也都說了因篇,不設(shè)置是不是對不起人家泞辐,就吧唧吧唧的執(zhí)行了這兩個命令,然后第一個坑就在前面等著我了竞滓。
開始執(zhí)行
npm install-g react-native-cli
妥妥的告訴我解析不了“react-native-cli”(錯誤已經(jīng)過去了咐吼,當時也刪除了,電腦重啟了一下商佑,無法放出截圖了)锯茄,我一看知道這個是加載不了遠程文件,第一反應(yīng),靠不應(yīng)該啊肌幽,我能上網(wǎng)呀晚碾,而且這個文件遠程應(yīng)該存在的,要不然這么大一個網(wǎng)站放一個不存在的文件那的耽誤多少人的事情(不存在應(yīng)該會提示文件不存在)喂急,然后就為這個問題來回折騰格嘁,會不會是NPM不對?網(wǎng)上看到刪了重裝廊移,咱也是一個敢想敢干的人糕簿,吧唧執(zhí)行uninstall刪了,重裝狡孔,完了裝哪了懂诗,為什么NPM命令找不到了,一路搜苗膝,一路找殃恒,原來他沒有裝在
/usr/local/lib/node_modules
同時/usr/local/bin/npm也不存在,所以就沒有該命令荚醒,當然我也很茫然不知道怎么出現(xiàn)了這種情況芋类,但是這么也不是一個辦法呀,再刪=绺蟆:罘薄!順手把note也刪了泡躯,重新按照英文的文檔來安裝贮竟,但是在安裝react-native-cli還是報錯。上午的時候問旁邊的同事较剃,他說他也是按照這個流程走的沒遇到這種情況咕别,一切都很順利呀~ 我就又開始了我的糾結(jié)之旅。
下午吃完飯写穴,我同事說他的也不行了惰拱,然后看了鏡像地址,和我說會不會公司網(wǎng)把taobao字樣的域名屏蔽了啊送,wtf偿短,作為一個新人誰告訴我公司針對這些網(wǎng)站做了屏蔽。SO又重新設(shè)置了鏡像
npm config set registryhttp://registry.cnpmjs.org
妥妥的馋没,可以了N舳骸!篷朵!
安裝運行
作為一個資深的android工程師勾怒,Android環(huán)境肯定已經(jīng)安裝了婆排,所以開始init工程
react-nativeinit AwesomeProject
妥妥的沒有問題,繼續(xù)到該工程下笔链,開始進行運行段只,編譯失敗,提示
哦卡乾,這個簡單翼悴,ANDROID_HOME沒有配置,按照說明配置了一下
經(jīng)過source ~/.profile讓起生效幔妨,再次編輯安裝鹦赎,仍然提示該錯誤。這個時候想起一句話“重啟可以解決很多無法解釋的問題”误堡,重啟古话、上個廁所,果然锁施,可以了陪踩,看到完成的apk的時候,內(nèi)心滿滿的是幸福哈悉抵。
作為一個有錢的大公司的員工肩狂,早就告別了使用虛擬機的時代,直接真機上手姥饰。運行看到血紅血紅的界面傻谁,連不上服務(wù)器,然后聽同事說你搖一搖試試列粪,搖一搖出現(xiàn)了設(shè)置界面审磁,好神奇的功能,選擇
Debug server host for device
然后設(shè)置電腦的IP和端口(8081)岂座,然后重新reload态蒂,看到了喜人的
Welcome to React Native
搖一搖手機后,選擇開始熱更新费什,然后在每一次寫完代碼執(zhí)行保存命令后钾恢,它會自動的更新到手機上。
我使用的是WebStorm進行代碼開發(fā)的(網(wǎng)上有破解方法)鸳址,它會自動保存代碼赘那,每一次按下command+s后,手機會自動加載代碼氯质。
ps:感覺開始熱更新后,他有一個定時加載的機制祠斧,有時候代碼寫一半沒有保存手機上就自動同步了闻察。同時就算開始了熱更新,或者reload,有時候也會有不及時現(xiàn)象辕漂,這個時候可能需要重新編譯運行一下呢灶,記住:重啟能夠解決大部分科學無法解釋的事情钉嘹。