
? 不知不覺也用了RN三個月了,從零基礎開始,到現(xiàn)在快要上線了,一路也是坎坎坷坷?,F(xiàn)在有些時間來總結一下吧。
? 相信有不少是從ios 或者 android 轉過來的,或者有一定的前端基礎的。那么我就把這三個月的過程再來重新捋一捋,希望能幫到你。
基礎儲備
什么是React-native,算了 自己查吧~
環(huán)境搭建,相信難不倒你,谷歌度娘任你選,推薦用最新的React Native Versions.
合適的文檔你能幫助你節(jié)省很多時間.
-
熟悉一下 js 語言特性,現(xiàn)在我用的js好像是ES6。原來用的OC和swift,直接轉過來一時真的有點不適應弱類型語言,不過用起來是真的舒服。在開始,對布局呀,線程呀,還有像 promise,then,await一些關鍵字糊里也都糊涂的,相信過一段時間總會學好的。
如果你已經(jīng)決定開始使用了,和掌握一定的基礎知識之后,那就接下來一起探索React-Native的世界吧
項目搭建
? 開始搭建項目的時候,一般會確立一下的項目的基本結構,以及大概技術選型。
? 項目的基本機構的話,通常都是Tabbar+Navigation,或者是draw也就是抽屜效果,技術選型的話,我是用的Redux體系(其實是被推薦這么用的)+react-native-navigation然后就開始動工了。
? 恩,咦,啊?怎么弄,好吧,新手最重要的就要學會找教程,如何抱大腿,這篇React-Native從零搭建App,絕對適合你去搭建起來React-Native App,(其實我就是按照這個來的 2333
? 如果你按照這個搞定了,那么就可以在界面上先練習練習布局UI,先體驗體驗。建議先看完入門基礎.
? 如果你不想使用Redux,還有類似的mobx-react,可以參考react-native-iShiWuPai,來幫你快速實現(xiàn),不過個人比較推薦用Redux,因為在此基礎之上我用到的有redux-logger,redux-persist,redux-reset,redux-saga,這些會幫你做很多東西,讓讓復雜的東西更加簡單化.這里就不一一介紹了。上面的”React-Native從零搭建App“已經(jīng)說的很清楚了。
項目進階
? 完成一個完整的App,用到的東西真的會很多,這時候就需要學會如何找?guī)?,合理的運用github,能節(jié)省你不少時間。(這里有幾個小細節(jié)要提醒大家一下,因為React-native版本更新的快,在快速迭代中肯定很多庫都會出現(xiàn)不兼容的情況,所以盡量找start多的,更新頻繁的,就像2 years ago的庫,就盡量別用了。
? 廢話少說,react-native-guide,想要什么搜一搜,沒事可以看一看,真的很多,很滿yo~還有這老哥的ReactNativeMaterials.
? 什么?知道庫不知道怎么裝?乖乖的拿去,這里要說一下,在install 過程中,有些自動 link的是會各種報錯,就自己有問題,怎么辦,試試手動link,(其實自動link的就是代替了手動過程
? 呃,什么?這些還不夠用,那么試一試dva, Why is it called dva? From OverWatch.
? 這時候你肯定左手槍,右手炮了。但是怎么用,怎么把利器發(fā)揮出來,就是coder你的使命了。
項目coding
? 看到這,其實還是什么都不會是不是,遇到各種問題的話,還是從基礎的來,推文航歌,有很多界面上零散的知識。
? 還有這個,有很多js高級用法MDN Web Docs.多利用搜索,找到你想要的。
? 努力復制粘貼吧,這是什么話,努力ctrlC + ctrlV 吧,騷年。
項目尾聲
? 如果你的界面和業(yè)務都處理的差不多了,這里幾個小細節(jié)希望能幫到你
- 在RN項目中會有白屏現(xiàn)象的話,而且你用的是react-native-navigation,也就是要處理android的Splash Screen,推薦看這個,別瞎跑了,我搞了好幾天.
? 3. 逆向傳值,也就是原生和RN交互,如果你有rn解決不了的問題,為何不試試原生的寫,但是要有兩套代碼哦~ 還要注意交互的開銷。
結束
? 如果你上述的都搞定了,我也基本上沒什么可教的了. 或者接下來就是去探索React-native的原理了吧
? 難點,理解RN的state,也就是Redux 中的,action,reducer, 還有怎么在saga中去處理component中的業(yè)務邏輯。讓各個類各行其事~
福利時間
- 封裝的網(wǎng)絡請求.拿去
- 沒有順手的編譯器試試這個 VsCode,以及豐富的插件.
- 官網(wǎng)給的API不是很多? 了解一下菜鳥教程 ,或者下載一個Dash(豐富的開發(fā)語言文檔)

補充
不定時更新哦~
?