Как перейти к экрану при нажатии кнопки "Назад" в навигаторе стека React Navigation 5

Question

Есть много похожих вопросов, на которые даны ответы, но ни один из них не использует новейшую версию реакции-навигации. Я хочу go перейти на главный экран с экрана «Документ» при нажатии кнопки «Назад». Это то, что я пробовал, но это не сработало.

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown : false }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Camera" component={CameraScreen} />
    <Stack.Screen name="Document" component={Document} options={{
      headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => props.navigation.navigate("Home")}/>)
    }} />
  </Stack.Navigator>
</NavigationContainer>

Отредактируйте для большей ясности: мое приложение начинается с «Домой», затем переходит в «Камера», а затем в «Документ». Теперь я не хочу go возвращаться в «Камера», когда нахожусь в «Документе», а прямо в «Домой», когда я нажимаю кнопку возврата телефона. Согласно документации, так можно переопределить кнопку «Назад».

<Screen
  name="Home"
  component={HomeScreen}
  options={{
  headerLeft: (props) => (
   <HeaderBackButton
     {...props}
     onPress={() => {
       // Do something
     }}
   />
 ),

}} />; Но я не знаю, как go перейти в «Домой» с помощью приведенного выше кода. Поэтому я поискал похожие вопросы, и в большинстве из них было navigationOptions и другие вещи. Я попытался ответить на вопрос, приведенный ниже.

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}

} Так что да, кнопка «Назад» не отвечает, даже если я использую console.log

Answer 1

Я не уверен, как работает ваш код.

- вы можете дать нам больше информации.

Но стоит попробовать ниже.

import {CommonActions} from '@react-navigation/native';

props.navigation.dispatch(
   CommonActions.navigate({name: 'Home'}),
);

https://reactnavigation.org/docs/navigation-prop/#dispatch

Answer 2

Мне удалось добиться того, что мне было нужно. Мне пришлось переопределить физическую кнопку возврата в «Документе».

 useFocusEffect(
        useCallback(() => {
          const onBackPress = () => {
            navigation.pop(2); // remove two screens i.e. Document and Camera
            return true // disable normal behaviour
          };
          BackHandler.addEventListener('hardwareBackPress', onBackPress); // detect back button press
          return () =>
            BackHandler.removeEventListener('hardwareBackPress');
        }, [])
      );

Answer 3

Вы пробовали CommonActions.reset?

что-то вроде этого из do c:

import { CommonActions } from '@react-navigation/native';

// when you want to navigate to the Documents page, instead of doing
navigation.navigate({routeName: 'Documents'});

// you can try
navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Documents',
        params: { name: 'abc' },
      },
    ],
  })
);

Чтобы, когда вы вернетесь из Documents вы переходите к предыдущему экрану в стеке: Home.