React-Native中禁用Navigator手势返回的示例代码


Posted in Javascript onSeptember 09, 2017

在React-Native开发中,经常会用到导航。导航做什么用的呢,简单点说就是页面跳转。

个项目中,肯定有很多的页面要跳来跳去的,RN就给我们提供了Navigator组件,可以很好的管理页面的跳转。

在所有工作做完之后,发现有个bug!在从第一个界面跳转到下一个界面后,如果从屏幕左边向右滑,或者从上面想下滑,你会发现一个神奇的事情,那就是页面会通过滑动而返回到上一个界面。这让我们很尴尬了,本来打算禁止跳转返回的,或者返回时还要做些什么处理的,结果啥都没做,直接返回,可以说,这个功能有点适得其反了。

于是为了解决这个问题,到处找答案,官网没有说,论坛也没人回答。于是放置了很久很久,没想到在今天的而然查找下,终于找到解决方案了。

方案主要分三种:

1,自己定义个configureScene:

const NoBackSwipe = { 
 ...Navigator.SceneConfigs.HorizontalSwipeJump, 
  gestures: { 
   pop: {} 
  } 
};

然后在Navigator标签下使用

<Navigator  
   initialRoute={{Component:'xxx', name:'xxx', index:0, configure: NoBackSwipe}} 
   renderScene={this.renderScene.bind(this)} 
   configureScene={(route,routeStack)=>{ 
    return NoBackSwipe 
   }} 
  />

这里主要是处理了pop,其中还有jumpback,jumpforward的

2,如果你都不要返回处理的,直接将gestures都改成{}或者null

configureScene(route, routeStack){ 
 let configure = Navigator.SceneConfigs.PushFromRight; 
 switch(route.configure){ 
  case Consts.FloatFromLeft: 
   configure = Navigator.SceneConfigs.FloatFromLeft; 
   break; 
  case Consts.FloatFromBottom: 
   configure = Navigator.SceneConfigs.FloatFromBottom; 
   break; 
 } 
 return { 
  ...configure, 
  gestures:{}//或者改成null 
 }; 
}

然后使用也是一样: 

<Navigator initialRoute={{Component:'xxx', name:'xxx', index:0, configure: NoBackSwipe}} 
    configureScene={this.configureScene.bind(this)} 
    renderScene={this.renderScene.bind(this)} 
    onStartShouldSetResponder={()=>false}/>

我就是用的第二种。

3,还有一种,是直接改源码,在项目目录下找到路径:

/node_modules/react-native/Libraries/CustomComponents/Navigator/Navigator.js

里面有一段代码,去掉pop就可以了

var GESTURE_ACTIONS = [ 
 'pop',//把这个去掉就可以了 
 'jumpBack', 
 'jumpForward', 
];

这种直接修改源码的不推荐使用,因为每当你要升级RN或者做其他调整时,重新下载下来又得改,还是上面两种比较靠谱。

以上就是今天的大发现,终于解决滑动返回的问题了~

资料参考:How to disable back swipe gesture in react native navigator

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
Highcharts入门之简介
Aug 02 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
js实现自动锁屏功能
Jun 02 Javascript
js实现音乐播放控制条
Sep 09 #Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 #Javascript
详解vue2 $watch要注意的问题
Sep 08 #Javascript
Express + Session 实现登录验证功能
Sep 08 #Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 #Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
JavaScript实现开关等效果
Sep 08 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php 文件上传类代码
2011/08/06 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
在PHP中使用redis
2013/11/04 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
js实现筛选功能
2020/11/24 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python字符串的常用操作方法小结
2016/05/21 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
Golang的继承模拟实例
2021/06/30 Golang
Python中的嵌套循环详情
2022/03/23 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis