1. 程式人生 > >react native 物理返回鍵Back踩的坑

react native 物理返回鍵Back踩的坑

現在來說說我的坑,因為這是以前的人員寫的,他已經離職了,但是這個坑從我接手開始就一直存在,想著有時間再解決吧,現在快上線了,不能再拖了,看了他寫的程式碼,感覺程式碼沒毛病,但是執行就閃退,果然我還是太年輕了,下面是原碼,

  componentDidMount() {
    initializeListeners("root", this.props.nav);
    BackHandler.addEventListener(
      "hardwareBackPress",
      this.goBack(this.props.dispatch, this.props.nav)
    );
  }
goBack(dispatch,nav) {
    if (nav.index > 0) {
       dispatch(NavigationActions.back());
       return true;
    }

    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
        //兩秒內連續點back退出
        return false;
     }
     this.lastBackPressed = Date.now();
     ToastShort("再按一次返回鍵退出應用");
     return true;
  }

用bind傳參結果也是一樣的結果,繫結this後還是一樣的。

然後找各種資料,各種試,真是到處改,然而沒什麼用,因為我忽略了一個小細節,那就是我寫的函式後面帶了參,其他例子都是無參的,當我把官網例子完全拷貝過來試時,居然成功了,當時是驚喜的,why,看著都差不多,為啥我的不行,在一點一點對比下,就發現是繫結函式時帶引數了,問了同事,他說帶引數後返回的是結果,相當於綁定了一個值,也就是返回的true或者false,如果不帶引數,繫結的就是函式本身,真是學到新知識了,或許這是很基礎的東西,但我確實不懂,因為沒去研究過,拿到專案就開始看框架使用,還是該去好好研究一下。所以改成官網一樣的就行了,真是有很多需要學習的。下面是正確的例子:

componentDidMount() {
    initializeListeners("root", this.props.nav);
    BackHandler.addEventListener("hardwareBackPress", this.goBack);
  }
goBack = ()=> {
    const { dispatch, nav } = this.props;
    if (nav.index > 0) {
       dispatch(NavigationActions.back());
       return true;
    }

    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
        //兩秒內連續點back退出
        return false;
     }
     this.lastBackPressed = Date.now();
     ToastShort("再按一次返回鍵退出應用");
     return true;
  };

今天看到一個比較正確的回答,在React Native中bind方法的作用是為指定的事件新增相應的處理函式。就是將處理函式和指定的操作繫結在一起。操作觸發時函式執行,bind函式就是建立操作和函式執行的這種聯絡。

箭頭函式也能完成事件繫結,功能與bind一樣。

沒有bind時元件載入時會執行this.xx(xx),但是點選操作並不能使函式執行,因為只會在reload時呼叫一次,即元件渲染時呼叫。