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

总结

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