新知食APP架構分析--北京食物科技有限公司旗下產品

標籤：csdn   點擊事件   png   leo   渲染   資訊   asc   介面   業務   

 

俗話說不打無準備之仗，這次真是有點懵逼了，建議大家去面試的時候，尤其是去小型互連網公司的時候，如果你想比其他人有競爭力，那麼你要研究一下當前他的公司正在開發產品，他們的業務類型是什麼樣的，比如他們公司正在開發xxxApp，你可以花費兩天時間，做一個xxxApp的demo，等去面試的時候，你就可以有底氣的說，我研究了一下貴公司的業務，對貴公司的產品高度興趣，順便做了個demo，然後你把打包好的app在你手機上運行一下，給技術看一下，基本上這份offer就屬於你的了，一定要做事前要謀一下，古話說萬事不預則廢，預 則力！（小編就在前天面試的時候就吃了很大的虧，故，總結一下，分享給後來人，千萬要長腦子 啊）好，接下來我們解析一下新知食APP的架構，看一下其中用到了什麼技術。

 

 

上幾張圖，咱們按圖索驥，一步步走

 

 

 這三張圖示範了一個過程，從應用程式啟動到啟動ok載入出主菜單，這裡我們簡單說一下坑。

1.React Native啟動頁白屏現象，（用React Native架構的無論是Android APP還是iOS APP，在啟動時都出現白屏現象，時間大概1~3s（根據手機或模擬器的效能不同而不同）

why？為什麼會出現白屏？

React Native應用在啟動時會將js bundle讀取到記憶體中，並完成渲染。這期間由於js bundle還沒有完成裝載並渲染，所以介面顯示的是白屏。

白屏給人的感覺很不友好，那有沒有辦法不顯示白屏呢？

上文解釋了：為什麼React Native應用會在啟動的時候顯示一會白屏。既然知道了出現問題的原因，那麼離解決問題也不遠了。市場上大部分APP在啟動的時候都會有個啟動屏，啟動屏對於使用者是比較友好的，一來展示歡迎資訊，二來顯示一些產品資訊或一些廣告，啟動頁對於程式來說，是為程式完成初始化載入資料，做一些初始化工作的所保留的時間，啟動屏等待的時間可長可短，具體根據業務而定。

解決方案：http://blog.csdn.net/fengyuzhengfan/article/details/52712829(參考這個blog)

2.啟動進入首頁面後，依然布局簡單，如果按照我的解決方案來的話，主要採取stacknavigator+tabnavigator，可以看出，該app下有三個tab，

第一個tab為目標，他的布局由上往下看的話，首先採用第三方，卡式輪播，做出輪播圖效果，或者就是簡單的用一下<ScrollView></ScrollView>

再往下的話，用一個<View>包四個<TouchableOpcity>做具體的相應的事件處理

繼續往下的最新推薦和熱門推薦，我覺的應該用flatlist去做，不過我越看越不想用flatlist做的，倒是有幾分<WebView>的風格，直接載入過來的。

該提示是當點擊個人健康報告的時候，做出的相應的邏輯判斷，然後做出友好提示，顯然要查看個人健康報告是要先添加一個成員的。

的功能是我對這款App讚賞的一點，（該app有兩個模組，我個人覺得做的不錯，一個是的模組，另一個是該App用到尺規的第三方，我覺得也不錯）

首先分析該模組功能，該模組可以正對不同人做出個人飲食計劃，不同階段，不同日期，做出相應的早中晚三餐的合理搭配，非常不錯，這塊需要後台做 出複雜的處理，前台展示，到是還可以，那麼接下來說做法，直說能看的到的。（title那塊的返回箭頭太醜了，並且可以看出來，根本不是一個人做的，或者說，兩人開發，沒有達成相應的約定，一點都不統一）title下面的那個“飲食方案”和“原則”的小工具，這個用的太平常了，市面上都有，不過一半市面上的是放在title上的，（比如說boss直聘）而不是這樣的，下面的東西，我就不亂說了。

 

 “發現”這個模組，個人覺得就是用<WebView>做的，不多說了！

 

 

“我的”這個模組，先說我的這個tab，他是加了點擊事件的，因為這個模組，只有登入了的人，才有權操作，如果你沒有登入，他會讓你登入，只有登入的使用者，才可以看到的模樣！

好那麼如何給tab加點擊事件呢？

 

明天繼續完善...這種App，後台完善，一周就可以搭出來

 

 

 

 

 

 

 

 

新知食APP架構分析--北京食物科技有限公司旗下產品