禁用后退按钮，但当点击两次时，退出react native中的应用程序

Question

我正在尝试创建一个小型的react原生应用程序，在该应用程序中，我创建了一些屏幕。在一个特定的屏幕上，我想禁用系统后退按钮，我做到了，但我想在同一个屏幕上创建一个逻辑，如果用户点击两次，应用程序就会关闭。

我的屏幕

import React, {Component, useEffect} from 'react';
import {StyleSheet, Text, View, Button, BackHandler, Alert} from 'react-native';
export default function HomeScreen({navigation}) {
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', () => true);
return () =>
BackHandler.removeEventListener('hardwareBackPress', () => true);
}, []);
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Home Screen</Text>
<Button
title="Go to Other Screen"
onPress={() => navigation.navigate('Employees')}
/>
</View>
);
}

但还有一个问题，这个代码禁用了每个屏幕上的后退按钮。

Answer 1

基于已接受的答案(Bas van der Linden(。我创建了这个有用的钩子：

钩子

const usePreventCloseApp = (onBeforeCloseApp) => {
const [backPressedCount, setBackPressedCount] = useState(0);
useFocusEffect(
useCallback(() => {
const sub = BackHandler.addEventListener(
'hardwareBackPress',
() => {
if (onBeforeCloseApp) {
onBeforeCloseApp(() => setBackPressedCount(2));
} else {
setBackPressedCount((pre) => {
if (pre === 0) {
ToastAndroid.show('Press again to exit', 1000);
setTimeout(() => setBackPressedCount(0), 1000);
}
return pre + 1;
});
}
return true;
},
);
return sub.remove;
}, [onBeforeCloseApp]),
);
useEffect(() => {
if (backPressedCount === 2) {
BackHandler.exitApp();
}
}, [backPressedCount]);
return {
closeApp: () => setBackPressedCount(2),
};
};

用法

显示默认吐司"；再次按下退出">

const { closeApp } = usePreventCloseApp();

带有自定义回调

usePreventCloseApp((closeApp) => {
Alert.alert('Close App', 'Are you sure want to close app?', [
{
text: 'Cancel',
style: 'cancel',
},
{
text: 'Close App',
style: 'destructive',
onPress: closeApp,
},
]);
});

Answer 2

对于在按下硬件按钮两次后退出的部分，您可以创建一些状态，将其递增，当它等于2时，使用Backhandler的exitApp功能退出应用程序。

如果您只希望HomeScreen组件的Backhandler事件代码处于活动状态，则可以使用useFocusEffect

React Navigation提供了一个挂钩，当屏幕聚焦时运行效果，当屏幕失去焦点时清除

源

function HomeScreen({navigation}) {
const [backPressedCount, setBackPressedCount] = useState(0);
useFocusEffect(
useCallback(() => {
BackHandler.addEventListener('hardwareBackPress', () => {
setBackPressedCount((backPressedCount) => backPressedCount + 1);
return true;
});
return () =>
BackHandler.removeEventListener('hardwareBackPress', () => true);
}, []),
);
useEffect(() => {
if (backPressedCount === 2) {
BackHandler.exitApp();
}
}, [backPressedCount]);
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Home Screen</Text>
<Button
title="Go to Other Screen"
onPress={() => navigation.navigate('Employees')}
/>
</View>
);
}