react navigation跳转方面的知识点

本文探讨了react-navigation在React Native中的核心概念,它建立了一个路由网络索引,通过导航器管理界面切换。重点讲解了Stack Navigator,其特点是界面按线性堆叠,支持go back操作,并能显示header bar。还提到了其他导航形式,如Tab Navigator和Drawer Navigator,并讨论了导航层次和嵌套设计中的注意事项。
摘要由CSDN通过智能技术生成

导航的本质

和web界面不同,web界面直接通过url确定界面,通过<a>标签实现界面之间的切换。即使在SPA时代,也是通过比较轻松的router组件实现界面切换。但是native里面,特别是react-native开发里面,界面切换需要native层面手动实现,因此,一定需要有人站出来,把界面切换抽象为普适性的一种规则。react-navigation的基本思想,就是一个react-native。 app的所有界面(screen)都是素材,通过navigation这个导航器进行编制,让他们可以自由切换。

react-navigation的本质,就是建立一个路由网络的索引,并且在建立的时候,就规定好每一个索引节点的表现形式。而界面(screen)只是这些节点下面的素材,一个screen可以被引用到不同的节点下面,再加上节点上的配置信息,就可以产生不同的导航效果。而这些节点全部加起来,就是一个navigation,而一组同一层面的navigation又可以放在一起,再附加一些配置信息,这些配置信息可能对所有的navigation都有效,那么这些navigation的集合就被称为一个navigator。navigator有不同层面的,也就是说,一个navigator里面,可以吧另外一个navigator作为一个navigationSetNode(特殊节点)。这样,所有被引用到的screen都被管理在react-navigation建立的作用域下,这样,只要知道节点的名称,就可以立即导航到这个界面。

四种导航形式

react-navigation里面有四种导航形式,分别是:s

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值