React Native學(xué)習(xí)之Android的返回鍵BackAndroid詳解
前言
最近在學(xué)習(xí)使用 React Native開發(fā),iOS搞完,開始適配安卓,由于木有接觸過安卓,所以碰到了很多問題,第一個問題,安卓的返回鍵BackAndroid問題,
我寫了一個工具類,來搞定,其中用到了java原生代碼與js交互;好吧,下面開始正式內(nèi)容:
上代碼:
// BackAndroidTool
// 功能: "安卓手機(jī)上的返回鍵"
// Created by 小廣 on 2016-05-10 下午.
// Copyright © 2016年 All rights reserved.
/*
使用: 參考鏈接:http://reactnative.cn/post/480
1.在首頁/homepage頁(只需要在全局都存在的頁面調(diào)用一次監(jiān)聽即可)
componentDidMount(){
// 添加返回鍵監(jiān)聽
BackAndroidTool.addBackAndroidListener(this.props.navigator);
}
componentWillUnmount(){
// 移除返回鍵監(jiān)聽
BackAndroidTool.removeBackAndroidListener();
}
說明:BackAndroid在iOS平臺下是一個空實(shí)現(xiàn),
所以理論上不做這個Platform.OS === 'android'判斷也是安全的。
2. 某些類自定義返回鍵操作(即點(diǎn)擊返回鍵彈出一個alert之類的操作)
在所需類的初始化方法里調(diào)用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進(jìn)行push的時候,設(shè)置屬性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 {
// 監(jiān)聽返回鍵事件
addBackAndroidListener(navigator) {
if (Platform.OS === 'android') {
BackAndroid.addEventListener('hardwareBackPress',() => {
return this.onBackAndroid(navigator);
});
}
},
// 移除監(jiān)聽
removeBackAndroidListener() {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', () => {
});
}
},
// 判斷是返回上一頁還是退出程序
onBackAndroid(navigator) {
if (!navigator) return false;
const routers = navigator.getCurrentRoutes();
// 當(dāng)前頁面不為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();
}
// 默認(rèn)行為: 退出當(dāng)前界面。
navigator.pop();
return true;
}
// 當(dāng)前頁面為root頁面時的處理
if (this.lastBackPressed && (this.lastBackPressed + 2000 >= Date.now())) {
//最近2秒內(nèi)按過back鍵,可以退出應(yīng)用。
NativeCommonTools.onBackPressed();
return true;
}
this.lastBackPressed = Date.now();
ToastAndroid.show('再按一次退出應(yīng)用',ToastAndroid.SHORT);
return true;
},
// 自定義返回按鈕事件
customHandleBack(navigator, handleBack) {
if (navigator) {
let routes = navigator.getCurrentRoutes(); //nav是導(dǎo)航器對象
let lastRoute = routes[routes.length - 1]; // 當(dāng)前頁面對應(yīng)的route對象
lastRoute.handleBack = handleBack;
}
},
}
其中的java原生代碼如下:
管理類:RCTCommonToolsPackage (ps:如是不明白,可以去這里 React Native學(xué)習(xí):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);
}
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了,本文還有許多不足,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Android?數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析
這篇文章主要為大家介紹了Android?數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
android4.0混淆XmlPullParser報錯原因分析解決
今天,用android4.0在proguard-project.txt中加入 -libraryjars libs/ksoap2-android-assembly-2.6.0-jar-with-dependencies.jar這句話后,混淆時報上面的錯誤,下面與大家分享下具體的解決方法2013-06-06
Android實(shí)現(xiàn)騰訊新聞的新聞類別導(dǎo)航效果
這篇文章主要介紹了Android實(shí)現(xiàn)騰訊新聞的新聞類別導(dǎo)航效果,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03
Android實(shí)現(xiàn)圖片循環(huán)播放的實(shí)例方法
2013-05-05
android BitmapFactory.Options使用方法詳解
這篇文章主要為大家詳細(xì)介紹了android BitmapFactory.Options使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
Android中TextView自動適配文本大小的幾種解決方案
在布局中使用的話,注意按照你最大的設(shè)備來設(shè)置字體大小,這樣在小設(shè)備上回自動縮放,下面這篇文章主要給大家介紹了關(guān)于Android中TextView自動適配文本大小的幾種解決方案,需要的朋友可以參考下2022-06-06
Android 模仿iPhone列表數(shù)據(jù)View刷新動畫詳解
本文主要介紹Android 模仿iPhone列表數(shù)據(jù)view 刷新動畫的資料,這里整理詳細(xì)的資料,并附示例代碼及實(shí)現(xiàn)效果圖,有興趣的小伙伴可以參考下2016-09-09

