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

Question

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

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

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

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

Answer 1

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

пример

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',
});

Answer 2

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