如何根据道具有条件地在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组件，以便在其render方法中检查this.props.navigation.state.params.interests是否存在并包含值，如果不存在，则显示ChooseInterestsScreen的修改版本作为模态。