React-Native 從零搭建App

? 不知不覺也用了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é)希望能幫到你

  1. 在RN項目中會有白屏現(xiàn)象的話,而且你用的是react-native-navigation,也就是要處理android的Splash Screen,推薦看這個,別瞎跑了,我搞了好幾天.

? 2. JavaScript 浮點數(shù)陷阱及解法

? 3. 逆向傳值,也就是原生和RN交互,如果你有rn解決不了的問題,為何不試試原生的寫,但是要有兩套代碼哦~ 還要注意交互的開銷。

結束

? 如果你上述的都搞定了,我也基本上沒什么可教的了. 或者接下來就是去探索React-native的原理了吧

? 難點,理解RN的state,也就是Redux 中的,action,reducer, 還有怎么在saga中去處理component中的業(yè)務邏輯。讓各個類各行其事~

福利時間

?
Dash 示例.png

補充

不定時更新哦~

?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容