Necesitaría adaptar el siguiente código obtenido de React Navigation Docs (Snack), para evitar el Alert si ya he "guardado los cambios" antes de intentar regresar a la página anterior (por ejemplo si ya los he guardado a través de un botón, utilizando AsyncStorage.setItem). El código sólo detecta cambios en el campo text y mas allá de haber guardado o no previamente dichos cambios, siempre genera el Alert cuando se pretende regresar.
import * as React from 'react';
import { Alert, View, TextInput, StyleSheet } from 'react-native';
import { Button } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const EditTextScreen = ({ navigation }) => {
const [text, setText] = React.useState('');
const hasUnsavedChanges = Boolean(text);
React.useEffect(
() =>
navigation.addListener('beforeRemove', (e) => {
const action = e.data.action;
if (!hasUnsavedChanges) {
return;
}
e.preventDefault();
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',
onPress: () => navigation.dispatch(action),
},
]
);
}),
[hasUnsavedChanges, navigation]
);
return (
<View style={styles.content}>
<TextInput
autoFocus
style={styles.input}
value={text}
placeholder="Type something…"
onChangeText={setText}
/>
</View>
);
};
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.buttons}>
<Button
mode="contained"
onPress={() => navigation.push('EditText')}
style={styles.button}
>
Push EditText
</Button>
</View>
);
};
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="EditText" component={EditTextScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
content: {
flex: 1,
padding: 16,
},
input: {
margin: 8,
padding: 10,
borderRadius: 3,
borderWidth: StyleSheet.hairlineWidth,
borderColor: 'rgba(0, 0, 0, 0.08)',
backgroundColor: 'white',
},
buttons: {
flex: 1,
justifyContent: 'center',
padding: 8,
},
button: {
margin: 8,
},
});
Tal vez haya otro modo de hacerlo. Agradezco cualquier ayuda.
.: SOLUCIÓN IMPLEMENTADA (06JUL2021) :. Finalmente he creado la siguiente función:
const statusNavigation = (statementArg, navigation) => {
navigation[statementArg]('beforeRemove', (e) => {
const action = e.data.action;
e.preventDefault();
Alert.alert(
'¿Descarta los cambios?',
'Tiene cambios sin guardar. ¿Está seguro de descartarlos y regresar a la pantalla anterior?',
[
{ text: "Permanecer", style: 'cancel', onPress: () => {} },
{
text: 'Descartar',
style: 'destructive',
onPress: () => navigation.dispatch(action),
},
]
);
});
};
Luego, simplemente llamo a la función desde donde la necesite y como la necesite:
flagModify ? StatusNavigation('removeListener', 'false') : StatusNavigation('addListener', 'true')