React Native學習之Android的返回鍵BackAndroid詳解
前言
最近在學習使用 React Native開發(fā),iOS搞完,開始適配安卓,由于木有接觸過安卓,所以碰到了很多問題,第一個問題,安卓的返回鍵BackAndroid問題,
我寫了一個工具類,來搞定,其中用到了java原生代碼與js交互;好吧,下面開始正式內容:
上代碼:
// BackAndroidTool // 功能: "安卓手機上的返回鍵" // Created by 小廣 on 2016-05-10 下午. // Copyright © 2016年 All rights reserved. /* 使用: 參考鏈接:http://reactnative.cn/post/480 1.在首頁/homepage頁(只需要在全局都存在的頁面調用一次監(jiān)聽即可) componentDidMount(){ // 添加返回鍵監(jiān)聽 BackAndroidTool.addBackAndroidListener(this.props.navigator); } componentWillUnmount(){ // 移除返回鍵監(jiān)聽 BackAndroidTool.removeBackAndroidListener(); } 說明:BackAndroid在iOS平臺下是一個空實現, 所以理論上不做這個Platform.OS === 'android'判斷也是安全的。 2. 某些類自定義返回鍵操作(即點擊返回鍵彈出一個alert之類的操作) 在所需類的初始化方法里調用BackAndroidTool.customHandleBack 栗子: constructor(props) { super(props); BackAndroidTool.customHandleBack(this.props.navigator,() => { Alert.alert('提示','您還未保存記錄,確定要返回么?', [{text:'取消',onPress:() => {}}, {text:'確定',onPress:() => { this.props.navigator.pop(); }} ]); // 一定要 return true; 原因上面的參考鏈接里有 return true; }); } 3.某些頁面需要禁用返回鍵 在nav進行push的時候,設置屬性ignoreBack為true 即可 this.props.navigator.push({ component: 所需要禁用的類, ignoreBack:true, }); */ 'use strict'; import React,{ Platform, Navigator, BackAndroid, ToastAndroid, NativeModules, } from 'react-native'; // 類 var NativeCommonTools = NativeModules.CommonTools; export default { // 監(jiān)聽返回鍵事件 addBackAndroidListener(navigator) { if (Platform.OS === 'android') { BackAndroid.addEventListener('hardwareBackPress',() => { return this.onBackAndroid(navigator); }); } }, // 移除監(jiān)聽 removeBackAndroidListener() { if (Platform.OS === 'android') { BackAndroid.removeEventListener('hardwareBackPress', () => { }); } }, // 判斷是返回上一頁還是退出程序 onBackAndroid(navigator) { if (!navigator) return false; const routers = navigator.getCurrentRoutes(); // 當前頁面不為root頁面時的處理 if (routers.length > 1) { const top = routers[routers.length - 1]; if (top.ignoreBack || top.component.ignoreBack) { // 路由或組件上決定這個界面忽略back鍵 return true; } const handleBack = top.handleBack || top.component.handleBack; if (handleBack) { // 路由或組件上決定這個界面自行處理back鍵 return handleBack(); } // 默認行為: 退出當前界面。 navigator.pop(); return true; } // 當前頁面為root頁面時的處理 if (this.lastBackPressed && (this.lastBackPressed + 2000 >= Date.now())) { //最近2秒內按過back鍵,可以退出應用。 NativeCommonTools.onBackPressed(); return true; } this.lastBackPressed = Date.now(); ToastAndroid.show('再按一次退出應用',ToastAndroid.SHORT); return true; }, // 自定義返回按鈕事件 customHandleBack(navigator, handleBack) { if (navigator) { let routes = navigator.getCurrentRoutes(); //nav是導航器對象 let lastRoute = routes[routes.length - 1]; // 當前頁面對應的route對象 lastRoute.handleBack = handleBack; } }, }
其中的java原生代碼如下:
管理類:RCTCommonToolsPackage (ps:如是不明白,可以去這里 React Native學習:http://reactnative.cn/docs/0.25/native-modules-android.html#content);
package com.commonTools; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.Arrays; import java.util.Collections; import java.util.List; public class RCTCommonToolsPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList(new RCTCommonTools(reactContext)); } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }
自定義方法的類:RCTCommonTools
package com.commonTools; import android.content.Intent; import com.facebook.react.bridge.Callback; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.tcpaydls.BuildConfig; public class RCTCommonTools extends ReactContextBaseJavaModule { public RCTCommonTools(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "RCTCommonTools"; } /** * 此方法是為了解決返回鍵退出程序后,ToastAndroid不會消失的bug */ @ReactMethod public void onBackPressed() { Intent setIntent = new Intent(Intent.ACTION_MAIN); setIntent.addCategory(Intent.CATEGORY_HOME); setIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); getCurrentActivity().startActivity(setIntent); } }
總結
以上就是這篇文章的全部內容了,本文還有許多不足,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
android4.0混淆XmlPullParser報錯原因分析解決
今天,用android4.0在proguard-project.txt中加入 -libraryjars libs/ksoap2-android-assembly-2.6.0-jar-with-dependencies.jar這句話后,混淆時報上面的錯誤,下面與大家分享下具體的解決方法2013-06-06android BitmapFactory.Options使用方法詳解
這篇文章主要為大家詳細介紹了android BitmapFactory.Options使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Android中TextView自動適配文本大小的幾種解決方案
在布局中使用的話,注意按照你最大的設備來設置字體大小,這樣在小設備上回自動縮放,下面這篇文章主要給大家介紹了關于Android中TextView自動適配文本大小的幾種解決方案,需要的朋友可以參考下2022-06-06Android 模仿iPhone列表數據View刷新動畫詳解
本文主要介紹Android 模仿iPhone列表數據view 刷新動畫的資料,這里整理詳細的資料,并附示例代碼及實現效果圖,有興趣的小伙伴可以參考下2016-09-09