1. 程式人生 > >React Native的Navigator禁止全部介面的左滑手勢和部分介面的手勢

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

好了,完事了。