一周没上线了，这一周在和小伙伴们写一个缓存模块。周末也在学习别的东西，暂时没时间写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中的监听是啥。