我面临一个标题组件不会改变的问题。即使我在Stacknavigator导航选项中单独定义,它在所有屏幕上都是相同的。
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
即使我已分别在每个屏幕中添加,但它显示主页(第一个标题组件)作为附加。
我也覆盖了每个屏幕上的导航选项,但同样的标题问题。
static navigationOptions = ({ navigation, screenProps }) => ({
title: 'User List',
headerTitle:'User List',
headerTintColor :'#ffffff',
});
下面是我的完整代码
const AppNavigator = StackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
headerMode: 'none'
}
},
Home: {
screen: AppDrawerNavigation,
navigationOptions: ({
navigation
}) => ({
header: < Header
outerContainerStyles={{ backgroundColor: '#1999CE' }}
leftComponent = {
<Icon name='menu' color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
}
centerComponent = {
{
text: 'Home',
style: {
color: '#fff'
}
}
}
rightComponent = {
{
icon: 'home',
color: '#fff'
}
}
/>,
}),
},
WebViews: {
screen: AppDrawerNavigation,
navigationOptions: {
header: null,
headerMode: 'none'
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#1999CE',
},
}
},
UserList :{
screen:AppDrawerNavigation,
navigationOptions: ({
navigation
}) => ({
title: 'List User',
headerTitle:'List User',
header: < Header
outerContainerStyles={{ backgroundColor: '#1999CE' }}
leftComponent = {
<Icon name='menu' color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
}
centerComponent = {
{
text: 'List User',
style: {
color: '#fff'
}
}
}
rightComponent = {
{
icon: 'home',
color: '#fff'
}
}
/>,
}),
}
},
{ navigationOptions: {
headerMode: 'screen'
},
}
);
const AppDrawerNavigation = DrawerNavigator({
Home: {
screen: HomeScreen,
},
WebViews: {
screen: WebViewScreen,
},
UserList: {
screen: UserListScreen,
},
},
{
navigationOptions: {
headerMode: 'none'
},
drawerPosition: 'left',
drawerWidth: 200,
contentOptions: {
activeTintColor: '#000000',
activeTintColor :'#ffffff',
activeBackgroundColor :'#1999CE',
inactiveTintColor :'#1999CE',
inactiveBackgroundColor :'#ffffff',
}
}
);
您能否提出解决此问题的可能解决方案?