React native 如何在react native中按back键导航到另一个屏幕？

我试图在用户单击“后退”按钮时发出警报，在该按钮中他将获得两个选项，是或否。如果用户单击“否”，用户将停留在该屏幕上，如果用户按下“是”，则我希望显示一些不同的屏幕

基本上，我想防止用户返回到上一个屏幕，而是将用户重定向到另一个屏幕。 下面是我试图使其工作的示例useEffect代码：

useEffect(() => {
    navigation.addListener('beforeRemove', (e) => {
      e.preventDefault();

      Alert.alert(
        'Registration Process',
        'Are you sure you want to cancel the registration process?',
        [
          {
            text: 'Yes',
            style: 'destructive',
            // If the user confirmed, then we dispatch the action we blocked earlier
            // This will continue the action that had triggered the removal of the screen
            onPress: () => {
              // navigation.dispatch(e.data.action);
              navigation.navigate('SignUp');  // On pressing Yes, user should be shown this screen.
            },
          },
          {text: 'No', style: 'cancel', onPress: () => {}},
        ],
      );
    });
  }, [navigation]);

---

运行应用程序后，当我按“是”时，我会一次又一次地处理警报框。

当用户试图离开页面时，您可以创建一个

hook

，并启用

backpress

在

App.js

所在的位置创建一个名为

hooks

的文件夹

在其中创建一个名为

useBackHandler.ts的文件

内部
useBackHandler.ts
粘贴此

import { useEffect } from 'react';
import { BackHandler } from 'react-native';

export function useBackHandler(handler: () => boolean) {
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handler);

    return () => BackHandler.removeEventListener('hardwareBackPress', handler);
  }, [handler]);
}

然后在您的
注册表屏幕中
创建一个函数，以便在
后退时执行
，或者当用户希望这样后退时执行

const AlertConfirmation = () => {
    Alert.alert(
      'Registration Process',
      'Are you sure you want to cancel the registration process?',
      [
        {
          text: 'Yes',
          style: 'destructive',
          onPress: () => {
            navigation.navigate('ScreenOne');
          },
        },
        { text: 'No', style: 'cancel', onPress: () => {} },
      ]
    );
  };

我为你们制作了一个零食，让你们看看它的工作示例

签出。
此方法将继续无限运行。请检查我的答案以获得更好的实现谢谢！成功了。你能解释一下这背后的工作原理吗。我从来没有创建过自定义挂钩。是的，当然！。。。这里发生的事情是，每当我们按下
Back
按钮时，BackHandler事件侦听器就会被触发，并停止返回的
默认操作
，然后执行显示警报框的
警报确认
功能。为什么我的方法不起作用？为什么它无限运行？我认为它可能会无限运行，因为点击“是”屏幕会不断被移除我想？因为正如您在
useffect
的依赖项中所知道的，您包括了
navigation
prop…这意味着您在
useffect
中编写的代码块将在
navigation
prop发生更改时运行…因此，现在…每当您在警报中按下“是”选项时，它将再次执行
useffect
part，因此它将无限运行。