如果您在使用多个导航器,并且在组件的componentWillUnmount方法中尝试删除回退处理程序,则可能会发现删除函数不起作用,这是因为多个导航器共享同一个回退处理程序。要解决这个问题,您可以在每个导航器上设置自己的回退处理程序,并在组件的componentWillUnmount方法中删除与该导航器相关联的回退处理程序。以下是一个示例代码,展示如何在不同导航器上设置和删除回退处理程序:
import { BackHandler } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
const MyScreen = ({ navigation }) => {
useFocusEffect(
React.useCallback(() => {
const onBackPress = () => {
navigation.goBack();
return true;
};
BackHandler.addEventListener('hardwareBackPress', onBackPress);
return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
}, [])
);
// ...
return {/* ... */} ;
};
在上面的代码中,我们使用了useFocusEffect
钩子来设置回退处理程序。注意,此钩子仅在屏幕处于活动状态时执行,因此您不必担心与其他导航器的回退处理程序冲突。还要注意,在卸载组件时我们使用removeEventListener
方法来删除回退处理程序,以确保不会在未挂载的组件上使用已删除的回退处理程序。