Android 反应导航';在移除之前';未在React Native中激发事件

Android 反应导航';在移除之前';未在React Native中激发事件,android,react-native,react-navigation,react-navigation-stack,Android,React Native,React Navigation,React Navigation Stack,我试图阻止用户在React Native中录制视频时通过Android后退按钮或手势返回。根据React Navigation的说明,应该使用beforeRemove事件侦听器来处理它。但在回去的时候,这件事永远不会被触发 我尝试了blur,但它被触发了,但由于此事件没有preventDefault()方法,因此在这种情况下它不可用 React导航-v5.x 反应本机-0.63.2 下面是我试图实现的屏幕的示例代码 const VideoCapturePage = ({navigation})

我试图阻止用户在React Native中录制视频时通过Android后退按钮或手势返回。根据React Navigation的说明,应该使用
beforeRemove
事件侦听器来处理它。但在回去的时候,这件事永远不会被触发

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

React导航-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>
  );
};
constvideocapturepage=({navigation})=>{
const[isRecording,setIsRecording]=使用状态(false);
useffect(()=>{
navigation.addListener('beforeRemove',(e)=>{
如果(!isRecording){
返回;
}
e、 预防默认值();
警惕,警惕(
“未保存的更改”,
“有未保存的更改。请选择所需内容。”,
[
{
文本:“返回”,
onPress:()=>{
导航、调度(如数据、动作);
},
},
{
文本:“取消”,
onPress:()=>{
console.log('cancelled');
},
},
{
文本:“继续编辑”,
onPress:()=>{
console.log('continue');
},
},
],
{
可取消:false,
},
);
});
},[navigation,isRecording]);
返回(
);
};

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

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

用户将一个新屏幕推到屏幕顶部,侦听器在堆栈中
用户从一个选项卡/抽屉屏幕导航到另一个选项卡/抽屉屏幕“

您使用的是哪个版本的React导航?它不是在所有版本的v5中都可用,只有v5.7+。是的,我使用的是Reac导航版本<5.7.x。我升级了所有的React导航包,效果非常好。谢谢你,伙计!不过,React导航的文档是误导性的。这个特性是在V5.x下记录的,但并没有说明它可以在> = V5.7.XI上创建一个DRO的拉取请求来显示最小版本。