Hago navegación en reaccionar nativo donde todas las flechas hacia atrás o presione hacia atrás regresan a la ruta inicial. La última opción es listar el evento onBackPreessed y pasar la llamada a la ruta de inicio, que es el hogar. Espero que haya accesorios para permitir que la pantalla vuelva a la pantalla de inicio en las navegaciones de pila.
Lo que está sucediendo
En casa : vaya a los detalles y luego vaya A presione la flecha hacia atrás en A , vuelve a los detalles
Necesita acciones
En casa : ir a detalles y luego ir Una flecha hacia atrás presione A volver a casa en lugar de detalles
El código que intento
import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Details')} /> </View> ); } function DetailsScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> <Button title="Go to A" onPress={() => navigation.navigate('A')} /> </View> ); } function A({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>AAAAAAAAAAAAAAAAAAA Screen</Text> </View> ); } const Stack = createNativeStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home" detachInactiveScreens={true} detachPreviousScreen={true}> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Group screenOptions={{ presentation: 'modal' }}> <Stack.Screen name="Details" component={DetailsScreen} options={{ presentation: 'transparentModal' }} /> <Stack.Screen name="A" component={A} /> </Stack.Group> </Stack.Navigator> </NavigationContainer> ); } export default App;puede hacerlo pasando "clave" para "navegar" más información (fuente): https://reactnavigation.org/docs/navigation-prop/
https://reactnavigation.org/docs/navigation-prop/#going-back-from-a-specific-screen
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_A }); navigation.navigate({ name: SCREEN, key: SCREEN_KEY_B }); navigation.navigate({ name: SCREEN, key: SCREEN_KEY_C }); navigation.navigate({ name: SCREEN, key: SCREEN_KEY_D }); navigation.navigate({ key: SCREEN_KEY_A }); // will go to screen A FROM screen DCreo que puedes usar BackHandler en la pantalla A.
Por lo tanto, debe escuchar BackHandler en la pantalla A y navegar a la pantalla de inicio cuando se activa.
Su pantalla A debería verse así:
import { BackHandler } from 'react-native'; function handleBackPressHandler() { navigation.navigate('HomeScreen'); return true; } useEffect(() => { BackHandler.addEventListener('hardwareBackPress', handleBackPressHandler); return () => { BackHandler.removeEventListener('hardwareBackPress', handleBackPressHandler); }; }, []);El comportamiento predeterminado de React Navigation es solo este, lo lleva a la última pila visitada al presionar Atrás, pero si desea actualizarlo, puede utilizar esta línea de código:
useFocusEffect( //imported from @react-navigation/native-stack React.useCallback(() => { const onBackPress = () => { navigation.navigate('InitialRouteName'); }; BackHandler.addEventListener('hardwareBackPress', onBackPress); return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress); }, []));
Como referencia, puede consultar esto: https://reactnavigation.org/docs/custom-android-back-button-handling/