React Navigation 'beforeRemove' 事件未在 React Native 中触发答案

【问题标题】：React Navigation 'beforeRemove' event is not getting fired in React NativeReact Navigation 'beforeRemove' 事件未在 React Native 中触发
【发布时间】：2020-12-01 11:09:21
【问题描述】：

我试图阻止用户在 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>
  );
};

【问题讨论】：

您使用的是哪个版本的 React Navigation？并非在 v5 的所有版本中都可用，仅在 v5.7+ 中可用。
是的，我使用的是 Reac Navigation 版本 = v5.7.x 上可用
我刚刚为文档创建了一个拉取请求以显示最低版本。

标签： android react-native react-navigation react-navigation-stack

【解决方案1】：

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

用户按下堆栈中屏幕上的返回按钮用户执行了向后滑动手势调度了诸如 pop 或 reset 之类的某些操作，从而将屏幕从状态中移除当屏幕未聚焦但未移除时，不会触发此事件。例如：

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

【讨论】：