如何完全替换 react-navigation 标头？答案

【问题标题】：How can I completely replace the react-navigation header?如何完全替换 react-navigation 标头？
【发布时间】：2017-06-30 14:02:57
【问题描述】：

我不是简单地尝试替换左中或右组件，我想替换整个标题，以便我可以使用 react-native-material-ui 中的工具栏。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您可以覆盖 navigationOptions 中的 header 属性：

import { HeaderBackButton } from 'react-navigation'

class Foo extends React.Component {
  static navigationOptions = (navigationProps) => {
    return {
      header: (props) => (
        <MyCustomHeaderContainer>
          <HeaderBackButton
            onPress={() => props.navigation.goBack(null)}
            tintColor="#fff"
          />
          <ContentComponent />
        </MyCustomHeaderContainer>
      ),
    };
  }
}

这假设Foo 组件是可路由的，例如

StackNavigator({
  Foo: {
    screen: Foo,
  },
});

UPD：您还可以在创建导航器时指定navigationOptions。这在某些情况下可能很方便，例如嵌套导航：

const MainNavigator = TabNavigator({...});

export default StackNavigator({
  MainNavigator: {
    screen: MainNavigator,
    navigationOptions: {
      header: navigationProps => <YourHeaderComponent {...navigationProps} />
    },
  }
}

【讨论】：

不起作用，Foo 位于 TabNavigator 中，而 TabNavigator 位于 StackNavigator 中！
嗨@sorinLates！抱歉，您最初的问题并不清楚。我已经更新了我的答案，以便添加一些信息来解决您的问题。
还是不行，我的确切架构是：<StackNavigator><DrawerNavigator><TabNavigator/></DrawerNavigator></StackNavigator>...我可能只是不显示任何标题并构建自定义工具栏...
这对我有用。但是，图标未正确显示，后退箭头不再起作用。你如何解决这个问题？ @AlexeyKureev