React Native学习安卓手机上的返回键BackAndroid

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

我写了一个工具类,来搞定,其中用到了Java原生代码与js交互;好吧,上代码:

[javascript] view
plain copy

 





//  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);

[java] view
plain copy

 





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

[java] view
plain copy

 





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);  

      

  }  

}