一周沒上線了，這一周在和小伙伴們寫一個緩存模塊。周末也在學(xué)習(xí)別的東西，暫時沒時間寫app了。但是寫寫文章還是可以滴。

文章發(fā)的少，評論也少。有評論暗指我不懂架構(gòu)，也許吧。人各不同，理解不同。呵呵一笑置之，本系列是我做rn的一點(diǎn)心得，也想略微幫助一下需要幫助的小伙伴。好了，不逼逼了。

這一次說一點(diǎn)稍微高級一點(diǎn)的吧，因為在手機(jī)上寫，等我有空了再貼各種圖吧。本次講一下app的層次結(jié)構(gòu)。

我們都知道rn大部分還是用ReactJS開發(fā)的，也就是用js 來寫頁面。寫頁面我們當(dāng)然要想好它的層次結(jié)構(gòu)。app一般有一個tab bar用來切換不同模塊，一個tab對應(yīng)一個模塊，每個模塊處于平級。對于這個tab bar ，有一個很不錯的第三方組件，貌似大家都用它。一時想不起來了，回頭我們細(xì)說。我們將上述每個模塊的首頁稱為一級頁面。我們點(diǎn)擊一級頁面可以跳轉(zhuǎn)到二級頁面，二級頁面就不需要tab bar 了，再往后跳轉(zhuǎn)區(qū)別與二級頁面不大。除這些以外，還有彈窗，我們也暫時定為一層。好的現(xiàn)在我們大概有三大層了。我們是否可以再細(xì)分一下？

我們知道我們的app主要的入口是App 組件。App組件中我們用了Navigator 組件，Navigator 中我們有一級頁面，一級頁面后有二級頁面。那么問題來了，我的彈窗在哪一層？？？？？？

這里有這么幾種情況:

1 二級頁面彈窗

2 一級頁面彈窗（不蓋住tab）

3 一級頁面彈窗（蓋住tab ）

首先針對前兩種情況，只要在頁面組件上加一個彈框，并沒有什么難度。這里有個比較推薦的方法，就是我們自己寫一個component類繼承自react ?component ，頁面繼承自我們自己的component 類，這樣我們只需要在我們的component 類中寫一個彈框，子類需要調(diào)用的時候只需要調(diào)用父類方法就行了。

比較復(fù)雜的就是第三種情況。因為tab用的第三方插件，所以我們需要在tab外層加一個彈框。tab外層是navigator ，并沒有頁面，再往外是app，就脫離了路由，也不可取。冥思苦想找出一種方法: 就是在navigator 和每個頁面之間都加一層，我稱之為viewcontroller 。那么我們的結(jié)構(gòu)就類似:

App

?navigator

? ? ?Viewcontroller

? ? ? ? ?Tab ? & 二級頁面

? ? ? ? ? ? ?一級頁面

這樣我們只需要在view controller 中寫彈框，并加上監(jiān)聽，需要彈框時調(diào)用監(jiān)聽方法就可以出現(xiàn)彈框了。 看到這里有小伙伴可能會問，為啥tab和二級頁面平級，一級頁面反而在更下層。很簡單一級頁面是在tab內(nèi)部，二級頁面是在tab外部，navigator 要么跳轉(zhuǎn)到tab，要么就是跳轉(zhuǎn)到二級頁面嘍。這里可能說的有點(diǎn)模糊，大家試一下便知。

好了，這一次先說到這，下一次我們來說說這個rn中的監(jiān)聽是啥。