React Native的Navigator禁止全部界面的左滑手势和部分界面的手势

如果想禁用

全部界面

可以有下面二种方法：http://www.jianshu.com/p/643779ade201

方法一：

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

configureScene= {(route) => {
return ({
...Navigator.SceneConfigs.PushFromRight,
gestures: null
});
}
}

方法二：

自己定义个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的

如果你只是想禁用

某些界面

那可以看下面代码：

首先在Navigator配置的时候不要写死是哪个手势，要传进来：

configureScene={(route) => ({
...route.sceneConfig || Navigator.SceneConfigs.PushFromRight,
gestures: route.gestures
})}

然后再你要跳转的时候，如果是要

开启手势

的：

const{navigator} = this.props;
if(navigator){
navigator.push({
component: LoginView,
sceneConfig: Navigator.SceneConfigs.PushFromRight,
gestures: Navigator.SceneConfigs.PushFromRight.gestures
});
}

如果是要

禁止手势

的：

const{navigator} = this.props;
if(navigator){
navigator.push({
component: Home,
sceneConfig: Navigator.SceneConfigs.PushFromRight,
gestures: null
});
}

    在公司的项目中，有个隐藏的bug，是因为React Native 默认自带，可以右滑返回上一个页面，这种体验，我个人觉得是不错的，但是在有些时候，我们不希望通过手势可以返回上一个页面，或者说希望禁止掉某些单独的页面能够通过手势返回，在百度一番后，发现只有禁止掉所有页面的手势的资料，所以发个文，希望可以帮到有需求的朋友~~~

        好了，下面上代码....

           



1.png

这个Navigator的设置，想必大家不陌生。就是一些场景切换设置，初始路由的设置,重点是_configureScene 方法，如下



2.png

  可以看到。我们给route 设置了一个type的属性，如果type===noScroll的话，gestures：{}，可以禁止掉手势返回事件, 如果你route的type不等于noScroll的话，还是可以手势返回上一个页面的。例如你从A页面跳转B页面，不希望B页面可以手势返回A页面就可以这样写了，



从A跳转B

好了，完事了。