【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参
来源:互联网 发布:百度云网络不给力 编辑:程序博客网 时间:2024/06/05 15:41
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2248.html
今天介绍一种应用开发中常用的负责页面切换及导航功能的组件: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 :
这里我们主要看 nextEvent 函数内容,
const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。
得到Navigator组件,可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。
下面代码段演示了如何切换到下一个页面:
还需要强调的是params,此参数是页面切换时传入下个页面的参数书写形式。
获取时,直接 this.props.titleText 即可得到,简单、方便。
下面代码段演示如何返回上个页面:
返回上一页面就十分简单了,不多赘述了。
Himi这里为了演示效果,所以下面把 ThreePage.js也给出源码:(最后附上动态效果图)
运行效果图:(点击查看动态效果)
从上图效果可以看出,切换之间的页面可以直接通过手势滑动进行切换~:)
- 【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参
- 【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参
- 【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)
- 【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)
- 【稀饭】react native 实战系列教程之Navigator实现页面跳转
- React Native导航Navigator组件基本使用方法
- React Native导航Navigator组件基本使用方法
- React Native 的 Navigator 组件(导航功能)
- react native navigator 的使用
- React Native 基础篇之Navigator页面的跳转与数据的传递
- React Native系列——Navigator组件的使用介绍
- React-Native学习笔记之:导航器Navigator实现页面间跳转
- React-native Navigator导航跳转
- [React Native]导航器Navigator
- React Native中ScrollableTabView与Navigator的结合使用
- React Native之Navigator
- React-Native之Navigator
- React Native 页面跳转react-navigation导航器的使用
- This support library should not use a different version
- awk-13
- Spark数据分析之第3课
- BZOJ 1179 Tarjan + spfa
- js调色板
- 【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参
- 初识datatables
- intellij idea快捷键
- (转)六种Socket I/O模型幽默讲解
- 实现高并发服务器三种简化模型 线程 进程 IO复用
- VC之 线程同步之事件对象(Event)
- leetcode---Container With Most Water
- 第七届科技节编程大赛复赛题目
- (4.3.2.8)Permission Denial: starting Intent { cmp=com.xxx.xxx}解决办法