React Native学习之Android的返回键BackAndroid详解

概述前言最近在学习使用ReactNative开发,iOS搞完,开始适配安卓,由于木有接触过安卓,所以碰到了很多问题,第一个问题,安卓的返回键BackAndroid问题,

前言

最近在学习使用 React Native开发,iOS搞完,开始适配安卓,由于木有接触过安卓,所以碰到了很多问题,第一个问题,安卓的返回键BackAndroID问题,

我写了一个工具类,来搞定,其中用到了java原生代码与Js交互;好吧，下面开始正式内容：

上代码:

// 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. 某些类自定义返回键 *** 作(即点击返回键d出一个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详解全部内容，希望文章能够帮你解决React Native学习之Android的返回键BackAndroid详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。