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

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

這一次說一點(diǎn)稍微高級(jí)一點(diǎn)的吧，因?yàn)樵谑謾C(jī)上寫，等我有空了再貼各種圖吧。本次講一下app的層次結(jié)構(gòu)。

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

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

這里有這么幾種情況:

1 二級(jí)頁面彈窗

2 一級(jí)頁面彈窗（不蓋住tab）

3 一級(jí)頁面彈窗（蓋住tab ）

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

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

App

?navigator

? ? ?Viewcontroller

? ? ? ? ?Tab ? & 二級(jí)頁面

? ? ? ? ? ? ?一級(jí)頁面

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

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