react native 物理返回鍵Back踩的坑
阿新 • • 發佈:2019-02-12
現在來說說我的坑,因為這是以前的人員寫的,他已經離職了,但是這個坑從我接手開始就一直存在,想著有時間再解決吧,現在快上線了,不能再拖了,看了他寫的程式碼,感覺程式碼沒毛病,但是執行就閃退,果然我還是太年輕了,下面是原碼,
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時呼叫一次,即元件渲染時呼叫。