react-native - 如何完全替换 react-navigation header ？

Question

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

Answer 1

您可以覆盖 header您的属性(property)navigationOptions :

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,
  },
});

更新:您也可以指定 navigationOptions在您创建导航器的那一刻。这在某些情况下可能很方便，例如嵌套导航:

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

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