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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React Native中Navigator的使用方法示例

    React Native中Navigator的使用方法示例

    前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习

  • react-native-tab-navigator组件的基本使用示例代码

    react-native-tab-navigator组件的基本使用示例代码

    要做的效果很简单,如下图所示: 使用基本教程 1.引入组件 import TabNavigator from 'react-native-tab-navigator'; Github上的地址 2.render方法中返回: render() { return ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '电影'}

  • ReactNative页面跳转Navigator实现的示例代码

    ReactNative页面跳转Navigator实现的示例代码

    本文介绍了ReactNative页面跳转Navigator,分享给大家.具体如下: Navigator即导航器,通过导航器我们可以实现应用在不同的页面之间进行跳转. 导航器会建立一个路由栈,用来弹出,推入或者替换路由状态.该路由栈相当于Android原生中使用的任务栈. renderScene 该方法就相当于我们使用的startActivity方法了,我们可以在该方法中设置需要渲染的场景(跳转的页面),该方法接收两个参数(必要参数),route和navigator,其中route就是路由的页面,

  • react-native组件中NavigatorIOS和ListView结合使用的方法

    react-native组件中NavigatorIOS和ListView结合使用的方法

    前言 本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先看效果 使用方法 index.ios.js import React, {Component} from 'react'; import { AppRegistry, NavigatorIOS } from 'react-native'; import NewsList from './components/

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

    在React-Native开发中,经常会用到导航.导航做什么用的呢,简单点说就是页面跳转. 个项目中,肯定有很多的页面要跳来跳去的,RN就给我们提供了Navigator组件,可以很好的管理页面的跳转. 在所有工作做完之后,发现有个bug!在从第一个界面跳转到下一个界面后,如果从屏幕左边向右滑,或者从上面想下滑,你会发现一个神奇的事情,那就是页面会通过滑动而返回到上一个界面.这让我们很尴尬了,本来打算禁止跳转返回的,或者返回时还要做些什么处理的,结果啥都没做,直接返回,可以说,这个功能有点适得其反

  • React Native使用百度Echarts显示图表的示例代码

    React Native使用百度Echarts显示图表的示例代码

    Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.相信很多同学在网页端都使用过.今天我就来介绍下在React Native中如何使用Echarts来显示各种图表. 首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的. 安装 npm install native-echarts --save 安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts. 目录结构如下图所示: 基础

  • React Native登录之指纹登录篇的示例代码

    React Native登录之指纹登录篇,具体内容如下所示: 最近在做react-native的APP,项目登录使用了普通账号密码登录.短信登录.手势登陆.指纹登录和人脸识别登录五种方式,所以准备做一个登录方式的合集.本篇是指纹登录篇,通过手机调用指纹传感器来获取用户指纹并做校验,校验成功则自动登录. 首先展示我们最后达成的成果,毕竟无图无真相,下方是真机录屏gif: 分析下gif所展示的功能点: 1,通过点击操作选项来弹出指纹识别界面,点击取消/上方空白处取消指纹识别 2,切换到其他登录方式时

  • React Native 使用Fetch发送网络请求的示例代码

    我们在项目中经常会用到HTTP请求来访问网络,HTTP(HTTPS)请求通常分为"GET"."PUT"."POST"."DELETE",如果不指定默认为GET请求. 在项目中我们常用到的一般为GET和POST两种请求方式,针对带参数的表单提交这类的请求,我们通常会使用POST的请求方式. 为了发出HTTP请求,我们需要使用到 React Native 提供的 Fetch API 来进行实现.要从任意地址获取内容的话,只需简单地

  • React Native使用Modal自定义分享界面的示例代码

    在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等.使用Modal搭建分析的效果如下: 自定义的分析界面代码如下: ShareAlertDialog.js /** * https://github.com/facebook/react-native * @flow 分享弹窗 */ import React, {Component} from 'react'; import {View, TouchableOpacity, A

  • React Native实现进度条弹框的示例代码

    本文介绍了React Native实现进度条弹框,分享给大家 我们在上传或者下载文件时候,希望有一个进度条弹框去提醒用户取当前正在上传或者下载,也允许用去取点击取消上传或者下载. 首先实现进度条. import React, { PureComponent } from 'react'; import { StyleSheet, View, Animated, Easing, } from 'react-native'; class Bar extends PureComponent { con

  • React Native中TabBarIOS的简单使用方法示例

    React Native中TabBarIOS的简单使用方法示例

    前言 大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧. 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, Toucha

  • React Native中Android物理back键按两次返回键即退出应用

    React Native中Android物理back键按两次返回键即退出应用

    前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为

随机推荐