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