React-Native之禁用Navigator默认的右滑手势返回上一页（react native 左右滑动）

25-03-01 13

本文将带您了解关于React-Native之禁用Navigator默认的右滑手势返回上一页的新内容，同时我们还将为您解释reactnative左右滑动的相关知识，另外，我们还将为您提供关于iOS系统自

本文将带您了解关于React-Native之禁用Navigator默认的右滑手势返回上一页的新内容，同时我们还将为您解释react native 左右滑动的相关知识，另外，我们还将为您提供关于iOS 系统自带右滑手势返回上一级界面、react native Navigator、react native navigator关闭侧滑手势、react native navigator禁用滑动返回的实用信息。

本文目录一览：

React-Native之禁用Navigator默认的右滑手势返回上一页（react native 左右滑动）
iOS 系统自带右滑手势返回上一级界面
react native Navigator
react native navigator关闭侧滑手势
react native navigator禁用滑动返回

React-Native之禁用Navigator默认的右滑手势返回上一页（react native 左右滑动）

前言

对于RN默认的导航组件Navigator,可以通过右滑切换view，这样效果往往在项目中并不是很需要，但是想要去掉，也着实费了点功夫，下面来看如何解决这个问题？

方法

主要原理，也很简单，就是设置gestures属性为{}或者null即可，为了方便使用，我们直接看代码：

...
<Navigator
    ref="navigator"
    initialRoute={{name: 'your first view'}}
    renderScene={this.renderScene}
    configureScene={this.configureScene}
    }
/>

...

configureScene = (route,routeStack) => {
                let configure = Navigator.SceneConfigs.PushFromright;

                switch (route.name){
                        case 'EditView':
                                configure = Navigator.SceneConfigs.FloatFromBottom;
                        default:
                                configure =  Navigator.SceneConfigs.PushFromright;
                };
                return {
                        ...configure,gestures:{}
                };
        }

在配置secen的时候，我们只需要返回结果中带上gestures即可，如上。

iOS 系统自带右滑手势返回上一级界面

ios7-- 系统自带的向右滑动手势返回上一个界面，ios7-- 手势

当从控制器 A push 到控制器 B，我们返回控制器 A，除了使用按钮返回

[self.navigationController pushViewController:Vc animated:YES];

还可以使用 ios7 出来的向右滑动，返回控制器 A

文档中是这样定义的：

@property(nullable, nonatomic, weak) id<UINavigationControllerDelegate> delegate;

@property(nullable, nonatomic, readonly) UIGestureRecognizer *interactivePopGestureRecognizer NS_AVAILABLE_IOS(7_0) __TVOS_PROHIBITED;

----------------------------------------------------------------------

我们在控制器 B 中的 viewDidLoad 中

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
        self.navigationController.interactivePopGestureRecognizer.enabled = YES;      // 手势有效设置为YES  无效为NO
        self.navigationController.interactivePopGestureRecognizer.delegate = self;    // 手势的代理设置为self 
}

但是当回到控制器 A 中时，再想 push 到控制器 B，就会出现卡屏，不会动的现象，因为 rootView 也会有向右滑动返回的问题

要解决这个问题，我们只需在控制器 A 的 viewDidAppear 中设置，interactivePopGestureRecognizer 为 NO:

-(void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
        self.navigationController.interactivePopGestureRecognizer.enabled = NO;
    }

}

这样即可以保证再 B 中向右滑返回 A 动后再次 pushB 时不会卡在 A 界面。

react native Navigator

下面代码来自http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/

/**
* 导航器组件实例
* https://github.com/facebook/react-native
*/
'use strict';
import React,{
AppRegistry,Component,StyleSheet,Text,View,TouchableHighlight,Navigator,} from 'react-native';

class NavButton extends React.Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#B5B5B5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class NavMenu extends React.Component {
render() {
return (
<View style={styles.scene}>
<Text style={styles.messageText}>{this.props.message}</Text>
<NavButton
onPress={() => {
this.props.navigator.push({
message: '向右拖拽关闭页面',sceneConfig: Navigator.SceneConfigs.FloatFromright,});
}}
text="从右边向左切入页面(带有透明度变化)"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
message: '向下拖拽关闭页面',sceneConfig: Navigator.SceneConfigs.FloatFromBottom,});
}}
text="从下往上切入页面(带有透明度变化)"
/>
<NavButton
onPress={() => {
this.props.navigator.pop();
}}
text="页面弹出(回退一页)"
/>
<NavButton
onPress={() => {
this.props.navigator.popToTop();
}}
text="页面弹出(回退到最后一页)"
/>
</View>
);
}
}
class NavigatorDemo extends Component {
render() {
return (
<Navigator
style={styles.container}
initialRoute={{ message: '初始页面',}}
renderScene={ (route,navigator) => <NavMenu
message={route.message}
navigator={navigator}
/>}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromBottom;
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,},messageText: {
fontSize: 17,fontWeight: '500',padding: 15,marginTop: 50,marginLeft: 15,button: {
backgroundColor: 'white',borderBottomWidth: StyleSheet.hairlinewidth,borderBottomColor: '#CDCDCD',});

AppRegistry.registerComponent('NavigatorDemo',() => NavigatorDemo);

运行报错，navigator is deprecated and has been removed。

打开当前目录，

npm install react-native-deprecated-custom-components --save

import {Navigator} from 'react-native-deprecated-custom-components';

修改后代码如下

'use strict';
import React,{Component} from 'react';
import  {
  AppRegistry,} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
class NavButton extends Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#B5B5B5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class NavMenu extends React.Component {
  render() {
    return (
      <View style={styles.scene}>
        <Text style={styles.messageText}>{this.props.message}</Text>
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向右拖拽关闭页面',});
          }}
          text="从右边向左切入页面(带有透明度变化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向下拖拽关闭页面',});
          }}
          text="从下往上切入页面(带有透明度变化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.pop();
          }}
          text="页面弹出(回退一页)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.popToTop();
          }}
          text="页面弹出(回退到最后一页)"
        />
      </View>
    );
  }
}
class NavigatorDemo extends Component {
  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{ message: '初始页面',}}
        renderScene={ (route,navigator) => <NavMenu
            message={route.message}
            navigator={navigator}
          />}
         configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.FloatFromBottom;
        }}
      />
    );
  }
}
const styles = StyleSheet.create({
   container: {
    flex: 1,messageText: {
    fontSize: 17,button: {
    backgroundColor: 'white',});

AppRegistry.registerComponent('testrn',() => NavigatorDemo);

react native navigator关闭侧滑手势

我们在使用Navigator进行页面跳转的时候，会配置跳转动画configureScene，但是你会发现，我们使用侧滑手势的时候，页面会拉动，会导致或页面关闭或打开页面。如果我们不希望让它响应侧滑手势呢？

解决如下：

在使用Navigator时，配置configureScene的gestures为null

configureScene={(route) => {
  var conf = Navigator.SceneConfigs.HorizontalSwipeJump;
  conf.gestures = null;
  return conf;
}}

react native navigator禁用滑动返回

转载:http://blog.csdn.net/pz789as/article/details/52606635

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

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

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

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

方案主要分三种：

1，自己定义个configureScene：

[html] view plain copy

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

然后在Navigator标签下使用

copy

关于React-Native之禁用Navigator默认的右滑手势返回上一页和react native 左右滑动的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于iOS 系统自带右滑手势返回上一级界面、react native Navigator、react native navigator关闭侧滑手势、react native navigator禁用滑动返回的相关知识，请在本站寻找。

本文标签：