react-native - 如何使用react-navigation在react-native中同时添加搜索栏和标签按钮

Question

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

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

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

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 />
  }
})

然后定制 navigationOptions在第五页:

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 .