React Native的Navigator禁止全部介面的左滑手勢和部分介面的手勢
阿新 • • 發佈:2019-02-05
如果想禁用全部介面
可以有下面二種方法: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
好了,完事了。