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

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比云州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式云州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋云州地區(qū)。費(fèi)用合理售后完善，10多年實體公司更值得信賴。

代碼:

// BackAndroidTool 
// 功能: "安卓手機(jī)上的返回鍵" 
// Created by 小廣 on 2016-05-10 下午. 
// Copyright © 2016年 All rights reserved. 
/* 
使用: 參考鏈接:http://reactnative.cn/post/480 
 1.在首頁/homepage頁(只需要在全局都存在的頁面調(diào)用一次監(jiān)聽即可) 
 componentDidMount(){ 
 // 添加返回鍵監(jiān)聽 
 BackAndroidTool.addBackAndroidListener(this.props.navigator); 
 } 
 
 componentWillUnmount(){ 
 // 移除返回鍵監(jiān)聽 
 BackAndroidTool.removeBackAndroidListener(); 
 } 
 說明：BackAndroid在iOS平臺下是一個空實現(xiàn)， 
 所以理論上不做這個Platform.OS === 'android'判斷也是安全的。 
 
 2. 某些類自定義返回鍵操作(即點擊返回鍵彈出一個alert之類的操作) 
 在所需類的初始化方法里調(diào)用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進(jìn)行push的時候,設(shè)置屬性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(); 
 // 當(dāng)前頁面不為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(); 
  } 
 // 默認(rèn)行為： 退出當(dāng)前界面。 
  navigator.pop(); 
  return true; 
  } 
 // 當(dāng)前頁面為root頁面時的處理 
 if (this.lastBackPressed && (this.lastBackPressed + 2000 >= Date.now())) { 
   //最近2秒內(nèi)按過back鍵，可以退出應(yīng)用。 
   NativeCommonTools.onBackPressed(); 
   return true; 
  } 
  this.lastBackPressed = Date.now(); 
  ToastAndroid.show('再按一次退出應(yīng)用',ToastAndroid.SHORT); 
  return true; 
 }, 
 
 // 自定義返回按鈕事件 
 customHandleBack(navigator, handleBack) { 
 if (navigator) { 
  let routes = navigator.getCurrentRoutes(); //nav是導(dǎo)航器對象 
  let lastRoute = routes[routes.length - 1]; // 當(dāng)前頁面對應(yīng)的route對象 
  lastRoute.handleBack = handleBack; 
 } 
 }, 
 
}

其中的java原生代碼如下:

管理類:RCTCommonToolsPackage (ps:如是不明白,可以去這里 React Native學(xué)習(xí):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之如何實現(xiàn)Android的返回鍵BackAndroid”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：ReactNative之如何實現(xiàn)Android的返回鍵BackAndroid
當(dāng)前地址：http://sd-ha.com/article30/jgigso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站設(shè)計、云服務(wù)器、域名注冊、靜態(tài)網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)