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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
没有document.getElementByName方法
Aug 19 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
vue中使用localstorage来存储页面信息
Nov 04 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
js闭包学习心得总结
Apr 17 Javascript
vue-cli3 热更新配置操作
Sep 18 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
长波有什么东西
2021/03/01 无线电
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
vue实现购物车小案例
2019/09/27 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python 常用string函数详解
2016/05/30 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python中count函数简单用法
2020/01/05 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
协议书怎么写
2014/04/21 职场文书
质量标语大全
2014/06/12 职场文书
房产分割协议书范文
2014/11/21 职场文书
会计专业自荐信范文
2019/05/22 职场文书
八年级作文之友情
2019/11/25 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS