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 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue3.0 上手体验
Sep 21 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python实现xlsx文件分析详解
2018/01/02 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
汽车驾驶求职信
2013/10/25 职场文书
简历自荐信
2013/12/02 职场文书
百家讲坛观后感
2015/06/12 职场文书
教研活动主持词
2015/07/03 职场文书
毕业酒会致辞
2015/07/29 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
python井字棋游戏实现人机对战
2022/04/28 Python