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 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
Express框架之connect-flash详解
May 31 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 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 远程图片保存到本地的函数类
2008/12/08 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
对Python中range()函数和list的比较
2018/04/19 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
财务管理专业推荐信
2013/11/19 职场文书
2014年自我评价
2014/01/04 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
工作会议主持词
2014/03/17 职场文书
企业文化标语口号
2014/06/09 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书