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

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

這一次說一點稍微高級一點的吧，因為在手機上寫，等我有空了再貼各種圖吧。本次講一下app的層次結構。

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

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

這里有這么幾種情況:

1 二級頁面彈窗

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

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

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

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

App

?navigator

? ? ?Viewcontroller

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

? ? ? ? ? ? ?一級頁面

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

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