如何使用react-navigation

Question

我有一个登录屏幕，当用户登录时，他们被带到类似上面显示的屏幕。

在这个屏幕中，我有一个tabNavigator包含5个屏幕的标签，类似于上图所示。它还有一个带有搜索栏的标题。此标题仅应显示在5个标签中的4个标签中，并且我需要在第5个标签中显示不同的标题。

有办法做到这一点吗？我知道我可以在5个标签中的4个中添加一个视图来渲染相同的标题，并在第5个屏幕中添加一个视图来呈现不同的标题，但我想知道是否有一种方法可以做到这一点而无需渲染同时在所有4个标签中查看相同的视图。

P.S它应该适用于iOS和Android

Answer 1

您可以按header配置TabNavigator navigationOptions：

const TabNav = TabNavigator({
  First: { screen: FirstPage },
  Second: { screen: SecondPage },
  Third: { screen: ThirdPage },
  Fourth: { screen: FourthPage },
  Fifth: { screen: FifthPage }
}, {
  navigationOptions: {
    header: <SearchHeader />
  }
})

然后在FifthPage中自定义navigationOptions：

class FifthPage extends Component {
  static navigationOptions = {
    header: <FifthPageHeader />
  }
}

我刚刚在Expo Snack上创建了一个演示：https://snack.expo.io/rJDGpmPHZ，第5个屏幕有一个蓝色标题，其他屏幕有一个红色标题。

在TabNavigator的{​​{1}}文档中，它没有列出header选项，我认为它会传递给StackNavigator。