Javascript 禁用后退按钮，但在react native中点击两次退出应用程序

我正在尝试创建一个小型的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>
  );
}

import React，{Component，useffect}来自'React'；
从“react native”导入{样式表、文本、视图、按钮、后台处理程序、警报}；
导出默认功能主屏幕（{navigation}）{
useffect（（）=>{
addEventListener（'hardwareBackPress'，（）=>true）；
return（）=>
removeEventListener（'hardwareBackPress'，（）=>true）；
}, []);
返回(
主屏幕
navigation.navigate（'Employees'）}
/>
);
}

---

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

对于两次按硬件按钮退出，您可以创建一些状态，增加它，当它等于

2

时，使用退出应用程序

如果您只希望

主屏幕

组件的

后台处理程序

事件代码处于活动状态，则可以使用

React Navigation提供了一个钩子，当屏幕进入焦点时运行一个效果，当屏幕失去焦点时进行清理

功能主屏幕（{navigation}）{
const[backPressedCount，setBackPressedCount]=使用状态（0）；
聚焦效应(
useCallback（（）=>{
BackHandler.addEventListener（'hardwareBackPress'，（）=>{
setBackPressedCount（（backPressedCount）=>backPressedCount+1）；
返回true；
});
return（）=>
removeEventListener（'hardwareBackPress'，（）=>true）；
}, []),
);
useffect（（）=>{
如果（反按计数===2）{
BackHandler.exitApp（）；
}
}，[backPressedCount]）；
返回(
主屏幕
navigation.navigate（'Employees'）}
/>
);
}

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