React Native очищает предыдущий экран из стека навигации

Я разрабатываю собственное приложение React в учебных целях. Сейчас я реализую навигацию с помощью React Navigation. Я использую навигацию по стеку. Но я не могу найти способ удалить предыдущий экран из истории навигации и убить приложение.

Я настроил свою навигацию вот так.

const AppStack = createStackNavigator({
  Login: {
    screen: Login
  },
  Register: {
    screen: Register
  },
  Events: {
    screen: Events
  }
});

Как вы можете видеть в приведенном выше коде, по умолчанию я открываю экран входа в систему. После входа в систему я открываю экран «События» вот так.

this.props.navigation.navigate('Events');

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

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


react-native react-navigation react-navigation-stack
person Wai Yan Hein    schedule 08.06.2019    source источник
comment
ищу подобное, но я хочу перейти к первому экрану. не сбрасывать все экраны. например, если пользователь принимает политику конфиденциальности и переходит на экран разрешений, я хочу вернуться к getstartedscren. и аналогичные из экрана регистрации, чтобы начать работу.   -  person Aftab Ufaq    schedule 16.04.2021

Ответы (5)


arrow_upward
17
arrow_downward

После успешного завершения входа или регистрации вам необходимо сбросить стек навигации, как показано ниже.

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Events' })],
});
this.props.navigation.dispatch(resetAction)

и, кроме того, на вашей Event странице вы должны добавить один статический метод, если вы не хотите, чтобы там был заголовок.

static navigationOptions = navigation => ({
        header: null
});

Надеюсь, это поможет вам.

person Hardik Virani    schedule 08.06.2019
comment
@Wai Yan Hein Примите ответ, если он решил вашу проблему, чтобы другие люди могли получить правильные ответы в будущем. - person Hardik Virani; 08.06.2019
comment
Привет, это решает проблему. Но могу ли я попросить большего? Это не открытие страницы событий с анимацией. Обычно он открывает новый экран со слайд-анимацией в IOS. - person Wai Yan Hein; 08.06.2019
comment
если вы сбросите стек, он не сможет анимироваться. анимация работает только с навигацией. навигация - person Hardik Virani; 08.06.2019

arrow_upward
11
arrow_downward

Начиная с версии V5

this.props.navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });

Используя крючок в функциональном компоненте,

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

const navigation = useNavigation();

navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });
person Rajesh Nasit    schedule 24.07.2020

arrow_upward
7
arrow_downward

В V5.x у нас есть метод reset

navigation.reset({
  index: 0,
  routes: [{ name: 'ScreenName' }],
});
person Vikas Sharma    schedule 18.11.2020

arrow_upward
-1
arrow_downward

Что вам нужно, так это функция сброса

import {NavigationActions} from 'react-navigation';

this.props.navigation.dispatch(NavigationActions.reset({
     index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
 }));
person DNA.h    schedule 08.06.2019

arrow_upward

arrow_downward

person    schedule
comment
Хотя этот ответ может быть актуальным или отвечать на вопрос без каких-либо объяснений, он все равно является ответом низкого качества. Пожалуйста, дайте объяснение, чтобы другие извлекли уроки из этого. - person Greco Jonathan; 25.11.2019