如何在本机反应中按后退键导航到另一个屏幕？

Question

我试图在用户单击返回按钮时发出警报，在该按钮将提供两个选项，是或否。如果用户单击“否”，用户将停留在该屏幕上，如果用户按下“是” " 那么，我想显示一些不同的屏幕。

基本上，我想阻止用户返回上一个屏幕，而是将用户重定向到另一个屏幕。 这是我试图使其工作的示例 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]);

运行应用程序后，当我按“是”时，我会一次又一次地收到警告框。

Answer 1

您可以创建一个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]);
}

然后在您的RegisterScreen 中创建一个函数以在backpress 上执行或当用户想要像这样返回时

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: () => {} },
      ]
    );
  };

我创建了一个 Snack 供您查看工作示例..

签出this。