如何在 React Native 中按后退键导航到另一个屏幕？

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。

如何在 React Native 中按后退键导航到另一个屏幕？

How to navigate to another screen on back key press in react native?

react-native

navigation

screen

event-listener

react-native-navigation