React Native中Navigator的使用方法示例


Posted in Javascript onOctober 13, 2017

前言

众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用.

方法如下

首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码.

React Native中Navigator的使用方法示例

1.习惯于在工程目录下建立js文件夹,并建立一个index.js文件(文件名可随便取)

React Native中Navigator的使用方法示例

2.代码编写

React Native中Navigator的使用方法示例
代码实现

renderScene和configureScene方法可以写在<Navigator />中但是那样会显得臃肿,所以建议这种写法.

configureScene(route){

   if(route.sceneConfig){ return route.sceneConfig; }

   return Navigator.SceneConfigs.FloatFromRight;//这里是设置页面切换的动画效果,具体可参考官网

}

页面初始化

import LoginPage from './pages/login';

const initialRoute = {

  name: 'login',

  page: LoginPage,

};

这几句代码相当于是初始化,从index.ios.js中导入了index.js文件,而index.js文件相当于设置了路由,初始化跳转到login页面.那么是不是实现跳转每个页面都要这么写呢?当然不是!

3.后续页面的跳转

上述代码说了初始跳转到login页面,那么login页面跳转到其他页面是不是还要写这么多代码呢?当然你愿意写这么多也是可以的,这里讲解更简洁的方式.

首先,在login页面import需要跳转到的目标页面.

React Native中Navigator的使用方法示例
目标页面导入

然后,记得写上这个方法,接收props

constructor(props, context) {

 super(props);

}

定义一个方法,如下图所示,name为目标页面的文件名,name为import时起的名.

React Native中Navigator的使用方法示例
目标页面跳转方法

最后,调用方法实现跳转.

React Native中Navigator的使用方法示例
方法调用

也可以在Button ,TouchableHighlight等组件中调用.

后续的页面以此类推,可以实现页面跳转的功能,希望对你们有所帮助.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 #Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 #Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 #Javascript
捕获未处理的Promise错误方法
Oct 13 #Javascript
解决ie img标签内存泄漏的问题
Oct 13 #Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
vue2组件之select2调用的示例代码
Oct 12 #Javascript
You might like
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python中qutip用法示例详解
2020/10/02 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
见习期自我鉴定
2014/01/31 职场文书
赔偿协议书
2015/01/27 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang