React Native学习安卓手机上的返回键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);      }}