Как условно отображать разные экраны в Stack Navigator в зависимости от реквизита

Можно ли отобразить другой экран в StackNavigator в зависимости от реквизитов, параметров или состояния?

Я думал о чем-то вроде приведенного ниже, но на данный момент я не могу понять, как разрешить stackNavigator иметь область действия над параметрами экрана.

export const MainNavigation = StackNavigator({
  Interests: {
    screen: navigation.state.params.interests ? InterestsScreen : ChooseInterestsScreen,
  },
  Home : {
    screen: HomeTab,
  },
}, {
  mode: 'modal',
  headerMode: 'none',
});

У кого-нибудь есть идеи на этот счет? Спасибо!!


react-native navigation stack-navigator conditional-rendering conditional
person beddow    schedule 03.10.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вместо того, чтобы давать условные компоненты для поддержки экрана, вы можете иметь компонент-контейнер для условного рендеринга в соответствии с нужным параметром.

Пример

const InterestsContainer = (props) => {
  return (props.navigation.state.params.interests ? InterestsScreen : ChooseInterestsScreen );
}

export const MainNavigation = StackNavigator({
  Interests: {
    screen: InterestsContainer,
  },
  Home : {
    screen: HomeTab,
  },
}, {
  mode: 'modal',
  headerMode: 'none',
});
person bennygenel    schedule 03.10.2017
comment
Здесь я получаю следующую ошибку: InterestsContainer(...): Должен быть возвращен допустимый элемент React (или null). Возможно, вы вернули undefined, массив или другой недопустимый объект. - person beddow; 04.10.2017
comment
Ошибка довольно ясна. Вероятно, у вас возникла ошибка при реализации примера. без кода трудно понять, где твоя ошибка. - person bennygenel; 04.10.2017

arrow_upward
1
arrow_downward

Вы должны перенести эту логику условного рендеринга в свой компонент InterestsScreen, чтобы внутри его метода рендеринга выполнялась проверка, существует ли this.props.navigation.state.params.interests и содержит ли значения, а если нет, отображалась модифицированная версия ChooseInterestsScreen как модальная.

person Pat Needham    schedule 03.10.2017