这篇文章主要介绍React Native之如何实现Android的返回键BackAndroid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
代码:
// 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);
}
}
以上是“React Native之如何实现Android的返回键BackAndroid”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。