这是我的app结构 . 我已经使用react-navigation实现 drawer, Tab and Stack Navigation
. 如何处理 Headers ?
Root Stack:
const PrimaryNav = StackNavigator({
drawerStack: { screen: DrawerNavigation }
}
DrawerNavigation:
const DrawerStack = DrawerNavigator({
'screen 1': {screen: Screen1TabNav},
'screen 2': {screen: Screen2TabNav},
},{
gesturesEnabled: false,
contentComponent: DrawerContainer
})
const DrawerNavigation = StackNavigator({
DrawerStack: { screen: DrawerStack }
},{
headerMode: 'float',
navigationOptions: ({navigation}) => ({
headerStyle: {backgroundColor: colors.border_color, height: 60},
title: 'screenName',
headerTintColor: 'white',
gesturesEnabled: false, // not to go login screen back
headerLeft: drawerButton(navigation)
})
})
Tab Navigator:
const Screen1TabNav = TabNavigator({
Tab1: {
screen: StackNav,
navigationOptions: {
tabBarIcon:
}
},
Tab2: {
screen: StackNav,
navigationOptions: {
tabBarIcon:
}
},{
navigationOptions: {
header: (
<View style={[{backgroundColor: '#5E565A', height: 60}]}>
...
</View>
)
}
}
Stack Navigator:
const StackNav = StackNavigator({
Main: {
screen: Addresssearch,
},
Detail: {
screen: DetailScreen,
navigationOptions: (props) => ({
title: "Detail",
})
}
},
{ headerMode: 'none'} // Removed Header from this Stack Navigation
)
我的疑问是,如何处理 Headers .
在主屏幕上,
每当我改变 TabNavigator 时, header title
都要改变 . 在某些标签中,视图本身必须更改 .
同样的事情,每当我改变 drawer Navigator header title
都要改变 .
如何处理 stack Navigator 的可重用自定义标头?