反应导航扩展标题答案

【问题标题】：React Navigation Extend Header反应导航扩展标题
【发布时间】：2019-11-04 04:04:00
【问题描述】：

我在 React Native 项目中使用 React Navigation。我想在标题中添加一些额外的内容。

我创建了一个自定义标题组件，并在堆栈导航器中使用它，如下所示：

navigationOptions: {
    header: CustomHeader
}

这工作正常，但它显然替换了整个标题。我知道我可以使用道具访问屏幕标题，但我不想为此设置样式，以便它匹配不使用自定义标题的屏幕。

无论如何我可以使用自定义标题但保留现有标题吗？是否可以将内容“插入”到标题之后的标题中，或者将现有标题（带有设备样式）包含到客户标题中？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

您可以在需要customHeader 的屏幕内简单地使用navigationOptions：

static navigationOptions = ({ navigation }) => {
   //If you need do things
   return {
      header : <CustomHeader />
   } 
}

【讨论】：

感谢您的回复。是的，我已经在这样做了，但我不想替换整个标题，而是想在标题之后插入一些额外的内容。否则我需要在我的客户标题中包含标题，并确保高度和边距等与 IOS 和 Android 设备匹配。

【解决方案2】：

你可以从@react-navigation/elements 中导入Header 组件，然后包装它。

例子：

import { Header } from '@react-navigation/elements'

function CutsomHeader(props) {
  return (
    <View>
      <Header {...props.options} />
      <SearchBar />
    </View>
  )
}
``

【讨论】：