как вернуться на страницу в react native navigation v3

#react-native #react-navigation

#react-native #реакция-навигация

Вопрос:

Я использую шаблон tabs на expo react native.

У меня есть навигация в AppNavigator.js

 import React from 'react';
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';
import GoalScreen from '../screens/GoalScreen';

const GoalStack = createStackNavigator({
  Goal: GoalScreen
})

export default createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  Main: MainTabNavigator,
  Goal: GoalStack
}));
  

Когда я нажимаю на цель, я отлично попадаю на эту страницу. но на экране цели я хочу вернуться, когда нажимаю кнопку «Назад».

 <Left>
                    <Button hasText transparent onPress={() => {
                        this.props.navigation.goBack(null);
                    }} >
                        <Text>Cancel</Text>
                    </Button>
                </Left>
  

Но по какой-то причине не работает.

Ответ №1:

В switch navigator вы должны переключать навигацию напрямую,

например:

this.props.navigation.navigate("Main");

И если вы переходите с одного экрана на другой экран (в стековой навигации), вы можете использовать функцию «Возврата».

Ответ №2:

Он работает правильно, нет предыдущего стека, к которому можно было бы вернуться.

Цель SwitchNavigator — показывать только один экран за раз. По умолчанию он не обрабатывает обратные действия и сбрасывает маршруты в их состояние по умолчанию при переключении

https://reactnavigation.org/docs/en/switch-navigator.html

Вы можете выполнить действие возврата внутри GoalStack, если у вас более одного экрана. Но как GoalStack, так и MainTabNavigator указаны в switch navigator. Поскольку switch navigator отображает по одному экрану за раз, вы не можете выполнить возврат здесь.

если вы хотите перейти к MainTabNavigator из GoalStack, вам нужно использовать, как показано ниже

this.props.navigation.navigate(«Главная»)

Комментарии:

1. Как добавить стек навигации? Я хочу сохранить историю

2. Вы можете изменить SwitchNavigator на StackNavigator, тогда только вы сможете сохранить историю

Ответ №3:

Попробуйте это:

 this.props.navigation.goBack();