我试图在用户点击后退按钮时发出警报,在那里他会看到两个选项,是或否。如果用户点击“否”,用户将停留在该屏幕上,如果用户按下“是” " 那么,我想要显示一些不同的屏幕。
基本上我想阻止用户返回上一个屏幕,而是将用户重定向到另一个屏幕。 以下是我正在尝试使其工作的示例 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]);
运行应用程序后,当我按“是”时,我会一次又一次地收到警告框。
答案 0 :(得分:1)
您可以创建一个 hook
并在用户尝试离开页面时在 backpress
上调用它
在您的 hooks
所在的位置创建一个名为 App.js
的文件夹。
在里面创建一个名为 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。