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

Question

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

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

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

PS它应该在iOS和Android上都可以工作

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 Expo Snack上创建了一个演示： https : //snack.expo.io/rJDGpmPHZ ，第5个屏幕的标题为蓝色，其他屏幕的标题为红色。

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