Как предотвратить возвращение в React Native с помощью React Navigation и «BeforeRemove» EventListener с пользовательски ⇐ IOS

[Anonymous]

То, чего я хочу достичь, просто. Я хочу, чтобы пользователь был вынужден подтвердить выход из навигатора вкладки под названием «Оформление». Кнопка.

Код: Выделить всё

function EditText({ navigation }) {
const [text, setText] = React.useState('');
const hasUnsavedChanges = Boolean(text);

React.useEffect(
() =>
navigation.addListener('beforeRemove', (e) => {
if (!hasUnsavedChanges) {
// If we don't have unsaved changes, then we don't need to do anything
return;
}

// Prevent default behavior of leaving the screen
e.preventDefault();

// Prompt the user before leaving the screen
Alert.alert(
'Discard changes?',
'You have unsaved changes. Are you sure to discard them and leave the screen?',
[
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
{
text: 'Discard',
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, hasUnsavedChanges]
);

return (

);
}
< /code>
Это код, который я пробовал: < /p>
useEffect(() => {
navigation.addListener('beforeRemove', e => {
if (userConfirmedExit) {
navigation.dispatch(e.data.action);
} else {
e.preventDefault();
setShowExitModal(true);
}
});
}, [navigation, userConfirmedExit]);

const handleConfirmExit = () => {
setUserConfirmedExit(true);
navigation.replace('ProfileTab');
};

const handleDeclineExit = () => setShowExitModal(false);
< /code>
Я обязан использовать navigation.dispatch (e.data.action) внутри eventlistener, но функция handleconfirmexit должна жить за пределами этого, и я просто не могу понять, как использовать BeforeRemove, и показывать настраиваемое мод, когда я не могу выходить из насадки. Да (т.е. запуск функции handleconfirmexit). < /p>
Я попытался удалить зависимости от использования. Единственное, что работало, но только на Android было следующее: < /p>
useEffect(() => {
navigation.addListener('beforeRemove', e => {
e.preventDefault();
setShowExitModal(true);
});
}, [navigation]);

const handleConfirmExit = () => {
navigation.removeListener('beforeRemove', () => {});
navigation.replace('ProfileTab');
};

const handleDeclineExit = () => setShowExitModal(false);

На iOS модал остается на следующем экране по какой -то причине, и, как мне кажется, виновник - это плохая реализация «BeforeRemove» прослушивателя в последнем примере.
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/711 ... beforeremo