如何完全替换react-navigation标头?

时间:2017-06-30 14:02:57

标签: react-native react-navigation

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

1 个答案:

答案 0 :(得分:1)

您可以覆盖List<T> = theObservarale .toList() .blockingGet(); 中的header媒体资源:

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

UPD:您还可以在创建导航器时指定StackNavigator({ Foo: { screen: Foo, }, }); 。这在某些情况下可能很方便,例如嵌套导航:

navigationOptions