React Native不会触发React Navigation'beforeRemove'事件

问题描述

我试图阻止用户在React Native中录制视频时通过Android后退按钮或手势返回。根据React Navigation的documentation，应使用beforeRemove事件监听器进行处理。但是返回时永远不会触发该事件。

我尝试使用blur，但是它被触发了，但是由于此事件没有preventDefault()方法，因此在这种情况下不可用。

反应导航-v5.x

React Native-0.63.2

这是我要实现的屏幕的示例代码

const VideoCapturePage = ({navigation}) => {
  const [isRecording,setIsRecording] = useState(false);

  useEffect(() => {
    navigation.addListener('beforeRemove',(e) => {
      if (!isRecording) {
        return;
      }

      e.preventDefault();

      Alert.alert(
        'Unsaved changes','There are unsaved changes. Please chose what you want.',[
          {
            text: 'Go back',onPress: () => {
              navigation.dispatch(e.data.action);
            },},{
            text: 'Cancel',onPress: () => {
              console.log('cancelled');
            },{
            text: 'Continue to Edit',onPress: () => {
              console.log('continue');
            },],{
          cancelable: false,);
    });
  },[navigation,isRecording]);

  return (
    <View style={styles.container}>
      <VideoCamera
        isRecording={isRecording}
        setIsRecording={setIsRecording}
      />
    </View>
  );
};

解决方法

根据您在选项卡/抽屉导航中未使用的文档。您只使用 Modal 和其他区域。 "请注意，此事件仅在移除屏幕时触发。例如：

用户在堆栈中的屏幕上按下后退按钮 用户执行了向后滑动手势 一些动作，如 pop 或 reset 被调度，从状态中移除屏幕 当屏幕未聚焦但未移除时，不会触发此事件。例如：

用户在屏幕顶部推送一个新屏幕，监听器在堆栈中 用户从一个标签/抽屉屏幕导航到另一个标签/抽屉屏幕"