React-Native中禁用Navigator手势返回的示例代码
在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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 关于ORA-01779问题的分析和解决 (r4笔记第22天)
- 想看爱奇艺VIP视频?一个python脚本帮你搞定
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十四)Redis缓存正确的使用姿势
- 关于shell中的pl/sql脚本错误排查与分析(r4笔记第21天)
- 关于BFC不会被浮动元素遮盖的一些解释
- MyBatis + MySQL返回插入成功后的主键id
- struts2+spring+hibernate整合步骤(1)
- 微信公众号问题:{"errcode":40125,"errmsg":"invalid appsecret, view more at http://t.cn/LOEdzVq, hints: [
- reflow和repaint(摘录自张鑫旭的翻译)
- git删除本地分支
- org.springframework.data.redis.serializer.SerializationException: Cannot serialize;
- 样式化加载失败的图片
- 使用telnet命令验证邮箱(r4笔记第19天)
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十二)Spring集成Redis缓存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Hive SQL经典优化案例
- 树莓派基础实验8:振动开关实验
- 几行代码实现cookie的盗取
- 从apollo的初始化看spring boot 1.5.3启动过程( 一)
- CSRF(跨站请求伪造)学习总结
- windows mysql 8.0 ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO)
- 树莓派基础实验9:蜂鸣器实验
- 浅谈文件上传漏洞(客户端JS检测绕过)
- java字符串操作:如何实现字符串的反转及替换?
- 树莓派基础实验10:干簧管传感器实验
- Java 字节流 字符流 io流
- 写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分 隔。
- 树莓派基础实验11:U型光电传感器实验
- java 缓冲流+原理图解
- 写一个函数,2 个参数,1 个字符串,1 个字节数,返回截取的字符串,要 求字符串中的中文不能出现乱码