React Native学习之Android的返回键BackAndroid详解

所属分类: 软件编程 / Android 阅读数: 32
收藏 0 赞 0 分享

前言

最近在学习使用 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); 
  
 } 
} 

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

更多精彩内容其他人还在看

Android中加入名片扫描功能实例代码

这篇文章主要介绍了Android中加入名片扫描功能实例代码的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

Android仿微信发表说说实现拍照、多图上传功能

这篇文章主要为大家详细介绍了Android仿微信发表说说实现拍照、多图上传功能,使用Retrofit2.0技术,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

设置Android系统永不锁屏永不休眠的方法

在进行Android系统开发的时候,有些特定的情况需要设置系统永不锁屏,永不休眠。本篇文章给大家介绍Android 永不锁屏,开机不锁屏,删除设置中休眠时间选项,需要的朋友一起学习吧
收藏 0 赞 0 分享

Android Retrofit 2.0框架上传图片解决方案

这篇文章主要介绍了Android Retrofit 2.0框架上传一张与多张图片解决方案,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android自定义等待对话框

这篇文章主要为大家详细介绍了Android自定义等待对话框的实现方法,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android中Window添加View的底层原理

这篇文章主要介绍了Android中Window添加View的底层原理,需要的朋友可以参考下
收藏 0 赞 0 分享

Android调用系统默认浏览器访问的方法

这篇文章主要介绍了Android调用系统默认浏览器访问的方法的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

Android开发退出程序的方法汇总

Android程序有很多Activity,比如说主窗口A,调用了子窗口B,子窗口B又调用子窗口C,back返回子窗口B后,在B中如何关闭整个Android应用程序呢? 下面脚本之家小编就给大家介绍android开发退出程序的几种方法,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

Android程序开发中单选按钮(RadioGroup)的使用详解

在android程序开发中,无论是单选按钮还是多选按钮都非常的常见,接下来通过本文给大家介绍Android程序开发中单选按钮(RadioGroup)的使用,需要的朋友参考下吧
收藏 0 赞 0 分享

Android实现仿网易今日头条等自定义频道listview 或者grideview等item上移到另一个view中

这篇文章主要介绍了Android实现仿网易今日头条等自定义频道listview 或者grideview等item上移到另一个view中 的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多