React-Native傻瓜式学习笔记(二):封装Navigator工具类

最近国内外使用React-Native写APP的公司越来越多了,我们公司也不甘落后,将使用React-Native重写APP这个事提上了日程。然而这个任务落到我头上的时候,我本人作为一个Android菜鸡程序猿当即表示“臣妾做不到啊~”,然而并没有什么卵用。没办法,只好硬着头皮现学现卖。这东西刚出时间并不算长,网上完整的系统的参考文章较少,多数都是零碎的知识点,只好在博客里做个笔记,省得忘了以后再去满大街找。。
这一系列笔记内容均仅代表我个人的观点,不保证都是对的

起因

一个真正的APP通常不会只有一个页面,甚至有些大型APP包含了上百的Activity(Android视角),页面之间互相跳转的逻辑错综复杂。虽然Android原生应用可以方便的通过Intent实现各个Activity之间的跳转,但对RN来说就不那么简单了。

一个纯粹使用RN开发的应用,通常在Android原生层面只有一个Activity,RN通过在这个Activity上不断的切换不同的组件(Component)来模拟Activity跳转的过程,而管理组件切换的控件就是Navigator

Navigator的基本使用方法在这里就不多做说明了,可以参考官方文档或自行百度。这里关注的重点在于,如果一个组件需要使用Navigator来切换页面的话,需要将这个Navigator通过传参的方式从最开始定义它的地方一层一层地传递进来——即使这个组件的父组件们根本不需要用到Navigator。这样做的缺点是显而易见的:页面的布局越复杂,这个Navigator的传递就越混乱。

为了解决这个问题,我们需要一个统一管理Navigator的管理员角色。每一个需要使用Navigator的组件,不需要找他的父组件要,全部去找这个管理员,这样就避免了Navigator传来传去传的满世界都是的尴尬。


工具类的实现

为了实现每个需要同一个Navigator的组件都找到同一个管理员,管理员的角色应该是唯一的,因此我们使用单例模式来实现它,这里我们叫它PageUtil。

// PageUtil.js

let instance = null;     // 工具类单例对象
let navi = null;    // 单例中保存的Navigator对象

export default class PageUtil {
    // 在构造函数中实现单例
    constructor() {
        if(!instance){
            instance = this;
        }
        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值