如何根据道具有条件地在 Stack Navigator 中渲染不同的屏幕答案

【问题标题】：How to conditionally render different screens in Stack Navigator depending on props如何根据道具有条件地在 Stack Navigator 中渲染不同的屏幕
【发布时间】：2026-01-19 04:10:01
【问题描述】：

是否可以根据 props、params 或 state 在 StackNavigator 中呈现不同的屏幕？

我正在考虑类似下面的内容，但目前我似乎无法弄清楚如何让 stackNavigator 拥有屏幕参数的范围。

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

有人对此有任何想法吗？谢谢！！

【问题讨论】：

标签： react-native navigation conditional conditional-rendering stack-navigator

【解决方案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',
});

【讨论】：

我在这里收到以下错误： InterestsContainer(...): A valid React element (or null) must be return。您可能返回了未定义、数组或其他一些无效对象
错误很明显。在实现示例时您可能会遇到错误。没有任何代码很难知道你的错误在哪里。

【解决方案2】：

您应该将该条件渲染逻辑传输到您的InterestsScreen 组件，以便在其渲染方法中检查this.props.navigation.state.params.interests 是否存在并包含值，如果不存在，则显示修改后的版本ChooseInterestsScreen 作为模态。

【讨论】：