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”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！