react-native - 如何使用 react-navigation 在 react-native 中添加搜索栏和选项卡按钮

Question

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

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

有没有办法做到这一点？我知道我可以在呈现相同标题的 5 个选项卡中的 4 个中添加一个视图，并在呈现不同标题的第 5 个屏幕中添加一个视图，但我想知道是否有一种方法可以做到这一点而不必呈现相同的视图在所有 4 个选项卡中一次又一次。

PS它应该适用于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 />
  }
})

然后navigationOptions在 FifthPage 中自定义：

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

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

TabNavigator在https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options的文档中，它没有列出该header选项，我认为它将传递给StackNavigator.