React Native實現再按一次退出應用程式功能
阿新 • • 發佈：2018-12-07
解決點選兩次手機back鍵退出程式
程式碼及註釋如下：
- //雙擊返回鍵退出程式
- //新增BackHandler，ToastAndroid的註冊
- componentWillMount(){//執行一次，在初始化render之前執行，
- BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
- }
- componentWillUnmount() {//當元件要被從介面上移除的時候，就會呼叫componentWillUnmount(),在這個函式中，可以做一些元件相關的清理工作，例如取消計時器、網路請求等
- BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
- }
- onBackAndroid = () => {
- //這裡的路由資訊是你自己專案中的，通過這個原理，我們還是可以提示一些其他資訊，比如表單沒填寫完整等等
- if(this.props.navigation.state.routeName=="Chat"){//寫入當前頁面的路由資訊
- if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {//按第二次的時候，記錄的時間+2000 >= 當前時間就可以退出
- //最近2秒內按過back鍵，可以退出應用。
- BackHandler.exitApp();//退出整個應用
- return false
- }
- this.lastBackPressed = Date.now();//按第一次的時候，記錄時間
- ToastAndroid.show('再按一次退出應用', ToastAndroid.SHORT);//顯示提示資訊
- return true;
- }else{
- return true;
- }
- };
React-Native中導航元件react-navigation的使用
其中包含了
StackNavigator 導航欄
navigationOptions 為對應路由頁面的配置選項
navigation 控制頁面跳轉
頁面跳轉，傳值，回撥傳參
TabNavigator 即是Tab選項卡
結合BackHandler處理返回和點選返回鍵兩次退出App效果
解決快速點選多次跳轉
解決點選兩次手機back鍵退出程式
程式碼及註釋如下：
- //雙擊返回鍵退出程式
- //新增BackHandler，ToastAndroid的註冊
- componentWillMount(){//執行一次，在初始化render之前執行，
- BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
- }
- componentWillUnmount() {//當元件要被從介面上移除的時候，就會呼叫componentWillUnmount(),在這個函式中，可以做一些元件相關的清理工作，例如取消計時器、網路請求等
- BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
- }
- onBackAndroid = () => {
- //這裡的路由資訊是你自己專案中的，通過這個原理，我們還是可以提示一些其他資訊，比如表單沒填寫完整等等
- if(this.props.navigation.state.routeName=="Chat"){//寫入當前頁面的路由資訊
- if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {//按第二次的時候，記錄的時間+2000 >= 當前時間就可以退出
- //最近2秒內按過back鍵，可以退出應用。
- BackHandler.exitApp();//退出整個應用
- return false
- }
- this.lastBackPressed = Date.now();//按第一次的時候，記錄時間
- ToastAndroid.show('再按一次退出應用', ToastAndroid.SHORT);//顯示提示資訊
- return true;
- }else{
- return true;
- }
- };
React-Native中導航元件react-navigation的使用
其中包含了
StackNavigator 導航欄
navigationOptions 為對應路由頁面的配置選項
navigation 控制頁面跳轉
頁面跳轉，傳值，回撥傳參
TabNavigator 即是Tab選項卡
結合BackHandler處理返回和點選返回鍵兩次退出App效果
解決快速點選多次跳轉