React Native学习之Android的返回键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. 某些类自定义返回键操作(即点击返回键弹出一个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); 

 }
} 

总结

以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。