指定自定义DrawerNavigator标头
问题描述:
我正在使用DrawerNavigator和StackNavigator
I am using a DrawerNavigator and a StackNavigator
const AppDrawer = DrawerNavigator(
{
Inbox: {
path: '/',
screen: WelcomeContainer,
},
Drafts: {
path: '/sent',
screen: SettingsContainer,
},
},
{
initialRouteName: 'Inbox',
contentOptions: {
activeTintColor: '#e91e63',
},
}
);
const AppNavigator = StackNavigator({
Home: {
screen: AppDrawer,
navigationOptions: ({navigation}) => ({
header: false
})
},
Settings: {
screen: SettingsContainer,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title
})
},
About: {
screen: About,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title
})
}
})
对于要在抽屉上单击的每个元素,我都希望始终显示相同的标题.我正在使用 react-native-elements .我使用以下代码在WelcomeContainer组件中实现了该代码
For each element clicked on the drawer I want to show always the same header. I am using a custom header from react-native-elements. I implement it in the WelcomeContainer component with this code
render() {
<Header
leftComponent={<MyCustomLeftComponent />}
centerComponent={<MyCustomCenterComponent />}
rightComponent={<MyCustomRightComponent />}
/>
}
我应该在每个我想要它具有标题的组件中重新编写此代码,还是可以在DrawerNavigator
中指示标题,如果可以,如何显示?
Shall I re-write this code in every component I want to it have the header or is it possible to indicate the header in DrawerNavigator
, and if yes how?
答
我遇到了同样的问题,并且执行了以下操作:
I had the same problem and did the following:
const AppDrawer = DrawerNavigator(
{
Inbox: {
path: '/',
screen: WelcomeContainer,
},
Drafts: {
path: '/sent',
screen: SettingsContainer,
},
},
{
navigationOptions: { header: null }, // <--- add this
initialRouteName: 'Inbox',
contentOptions: {
activeTintColor: '#e91e63',
},
}
);
// simple HOC
const withHeader = (WrappedComponent) => {
return class WithHeader extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<Header
leftComponent={<MyCustomLeftComponent />}
centerComponent={<MyCustomCenterComponent />}
rightComponent={<MyCustomRightComponent />}
/>
<WrappedComponent {...this.props} />
</View>
)
}
}
}
const AppNavigator = StackNavigator({
Home: {
screen: withHeader(AppDrawer), // <------ wrap the drawer
navigationOptions: ({ navigation }) => ({
header: false
})
},
Settings: {
screen: SettingsContainer,
navigationOptions: ({ navigation }) => ({
title: navigation.state.params.title
})
},
About: {
screen: About,
navigationOptions: ({ navigation }) => ({
title: navigation.state.params.title
})
}
})