Верны ли мои ожидания относительно навигации React?

Question

Это может быть мое отсутствие понимания, но кто-нибудь объяснит, если мои ожидания неверны в отношении навигации React?

Мое приложение - это более или менее вопросник, в котором один экран обрабатывает все вопросы.В основном он перемещается к себе с новым идентификатором вопроса.Это выбирает правильные данные и отображает их.Работает нормально, но при нажатии назад я не перехожу на предыдущий вопрос, а на домашнюю страницу.Я использую выставку и их рекомендуемая навигация .

Я ожидаю, когда я вернусь с последней страницы в:

Homepage => QuestionPage(id=1) => QuestionPage(id=3) 

Я бы вернулся на QuestionPage с идентификатором= 1, но он идет на домашнюю страницу.Я использую Навигацию на обеих страницах для поддержки навигационных реквизитов.

Это ожидание неверное или это правильное поведение навигации?Если да, то какие-либо подсказки, что делать, чтобы получить ожидаемое поведение.

Answer 1

Если вы используете StackNavigator и из QuestionPage на кнопку назад, вы делаете

 this.props.navigation.goBack();

вместо

this.props.navigation.navigate('Screen')} 

, это должно работать!

Если вы хотите иметь пользовательскую навигацию на экране реагирующей навигации, на заднем Android я бы порекомендовал прослушать didFocus следующим образом:

_didFocusSubscription;
  _willBlurSubscription;

  constructor(props) {
    super(props);
    this._didFocusSubscription = props.navigation.addListener('didFocus', payload =>
      BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
    );
  }

  componentDidMount() {
    this._willBlurSubscription = this.props.navigation.addListener('willBlur', payload =>
      BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
    );
  }
hardwareBackPress = () => {  this.props.navigation.navigate('Screen')} }

Более точный пример идокументация относительно этого здесь https://reactnavigation.org/docs/en/custom-android-back-button-handling.html

Answer 2

Это было так просто.Вместо

this.props.navigation.navigate('Question', {id=40})}

мне пришлось написать

this.props.navigation.push('Question', {id=40})}

Answer 3

Для достижения реагирования навигации многостраничного приложения с одной страницы.Вам необходимо добавить пакет «response-router-dom» в ваш проект.

import {
  Route as Router,
  Switch,
  Redirect
} from 'react-router-dom';

Вы должны настроить роутер для навигации по странице следующим образом.

<Switch>
<Router exact path="/questionpage/:handle" component={Questionpage} />
</Switch>

На странице вопросов Router:

this.props.match.params.handle // will help to get page number

Используя приведенный выше синтаксис, вы можете получить номер страницы и получить точные данные, которые вам нужны.