react-native - 如何根据道具有条件地在 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为模态。