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

Posted 2023-02-22

【中文标题】如何根据道具有条件地在 Stack Navigator 中渲染不同的屏幕

【英文标题】：How to conditionally render different screens in Stack Navigator depending on props

【发布时间】：2018-03-14 23:29:18

【问题描述】：

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

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

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

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

【参考方案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 作为模态。