React Navigation 'beforeRemove' 事件在 React Native 中没有被触发

Question

我试图阻止用户在 React Native 中录制视频时通过 Android 后退按钮或手势返回。根据 React Navigation 的 documentation，应该使用

beforeRemove

事件监听器来处理。但返回时该事件永远不会被触发。

我尝试使用

blur

，但它被解雇了，但由于此事件没有

preventDefault()

方法，因此在这种情况下不可用。

反应导航 - v5.x

反应本机 - 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>
  );
};

Answer 1

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

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

用户将一个新屏幕推送到屏幕顶部，监听器位于堆栈中 用户从一个选项卡/抽屉式屏幕导航到另一个选项卡/抽屉式屏幕”

Answer 2

useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel",
        },
        { text: "YES", onPress: () => BackHandler.exitApp() },
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener("hardwareBackPress", backAction);

    return () => backHandler.remove();
  }, []); 

您可以添加您不想在 Android 上返回的代码。手势处理在 Android 上没有帮助。这是链接：https://reactnavigation.org/docs/preventing-going-back/ 在文档上有一个适用于 android 的链接：https://reactnative.dev/docs/backhandler