React Native之如何實現Android的返回鍵BackAndroid

這篇文章主要介紹React Native之如何實現Android的返回鍵BackAndroid，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

代碼:

// BackAndroidTool 
// 功能: "安卓手機上的返回鍵" 
// Created by 小廣 on 2016-05-10 下午. 
// Copyright © 2016年 All rights reserved. 
/* 
使用: 參考鏈接:http://reactnative.cn/post/480 
 1.在首頁/homepage頁(只需要在全局都存在的頁面調用一次監聽即可) 
 componentDidMount(){ 
 // 添加返回鍵監聽 
 BackAndroidTool.addBackAndroidListener(this.props.navigator); 
 } 
 
 componentWillUnmount(){ 
 // 移除返回鍵監聽 
 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 { 
 // 監聽返回鍵事件 
 addBackAndroidListener(navigator) { 
 if (Platform.OS === 'android') { 
  BackAndroid.addEventListener('hardwareBackPress',() => { 
   return this.onBackAndroid(navigator); 
  }); 
 } 
 }, 
 
 // 移除監聽 
 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); 
  
 } 
}

以上是“React Native之如何實現Android的返回鍵BackAndroid”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！