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引用对象的方法
Jan 11 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JavaScript函数详解
Feb 27 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
vue滚动插件better-scroll使用详解
Oct 18 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
微信小程序入门之指南针
Oct 22 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
详解微信小程序 登录获取unionid
2017/06/27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python输出带颜色字体实例方法
2019/09/01 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
python爬虫如何解决图片验证码
2021/02/14 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
数字化校园建设方案
2014/05/03 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
浅谈MySQL函数
2021/10/05 MySQL