如何在React Native中使用React Navigation添加搜索栏和选项卡按钮

Question

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

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

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

注：它应该在iOS和Android上工作。

- Chetan

Answer 1

您可以通过navigationOptions来配置TabNavigator的header:

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，第五个屏幕有蓝色的标题，其他屏幕有红色的标题。

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

- Jacky Lee

---

如果在tabNavigator中无法传递header，你是如何做到的？我知道在stackNavigator中可以实现，但是你是如何在tabNavigator中实现的呢？我查看了你上传的演示代码，但是当我尝试在我的tabNavigator中添加header时，它并不能正常工作。 - Chetan

@Chetan 我也在想如何做到这一点！！你找到解决方案了吗！可以请你查看我的问题：https://stackoverflow.com/questions/46296119/adding-tab-component-in-a-view - Yasir