#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();