【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

本文介绍了React Native中的Navigator组件,用于实现页面导航和切换。通过设置initialRoute展示默认页面,利用navigator对象进行页面push和pop操作,同时详细阐述了参数传递的方式,使得页面间能便捷地互传信息。
摘要由CSDN通过智能技术生成
本站文章均为  李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2248.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2248.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator

一:Navigator

对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面。这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,很方便的组件。废话不多说:先上示例代码:

首先我们导入 Navigator 组件:

使用方式:

上面的代码,初始化了导航组件,且设置默认显示页面为 FirstPage,这里需要注意两点:

1. 我们主要关注 Navigator 里  initialRoute 中的 两个参数:

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下:

所以 name 和  component 都填写的为FirstPage

2. <Component {…route.params} navigator={navigator} />

上面这一行是将navigator作为props进行传递

3.  Navigator.SceneConfigs.HorizontalSwipeJump

上面一行是设置页面切换之间的动画效果,更多效果查看源文件:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

下面我们看下FirstPage.js :

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值