admin管理员组文章数量:1406943
I can't center the title in react-navigation V4+ its work fine before with v3, when use RN-stack I can't center the title for some reason I don't know.
it just appears on the right,
I try these in headerTitleStyle and headerStyle
justifyContent, alignItems and alignSelf but not works :/
If you have any idea about it tell me?
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",
here's Code
static navigationOptions = ({navigation}) => {
const showModal = navigation.getParam('showModal', () => {});
return {
title: navigation.getParam('title'),
headerTitleStyle: {
fontFamily: 'Cairo-Regular',
fontSize: Platform.OS == 'ios' ? 16 : 18,
color: '#fff',
flex: 1,
textAlign: 'center',
},
headerStyle: {
backgroundColor: navigation.getParam('color'),
},
headerRight: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.openDrawer();
}}>
<Icon
name="ios-menu"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
{!navigation.getParam('title').includes('details') && (
<Body>
<Button transparent icon onPress={() => showModal()}>
<Icon
name="more"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
)}
</Row>
</Grid>
),
headerLeft: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.pop();
}}>
<Icon
name="arrow-round-back"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.navigate('search');
}}>
<Icon
name="search"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
</Row>
</Grid>
),
};
};
I can't center the title in react-navigation V4+ its work fine before with v3, when use RN-stack I can't center the title for some reason I don't know.
it just appears on the right,
I try these in headerTitleStyle and headerStyle
justifyContent, alignItems and alignSelf but not works :/
If you have any idea about it tell me?
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",
here's Code
static navigationOptions = ({navigation}) => {
const showModal = navigation.getParam('showModal', () => {});
return {
title: navigation.getParam('title'),
headerTitleStyle: {
fontFamily: 'Cairo-Regular',
fontSize: Platform.OS == 'ios' ? 16 : 18,
color: '#fff',
flex: 1,
textAlign: 'center',
},
headerStyle: {
backgroundColor: navigation.getParam('color'),
},
headerRight: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.openDrawer();
}}>
<Icon
name="ios-menu"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
{!navigation.getParam('title').includes('details') && (
<Body>
<Button transparent icon onPress={() => showModal()}>
<Icon
name="more"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
)}
</Row>
</Grid>
),
headerLeft: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.pop();
}}>
<Icon
name="arrow-round-back"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.navigate('search');
}}>
<Icon
name="search"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
</Row>
</Grid>
),
};
};
2 Answers
Reset to default 7You need to use headerTitleAlign
https://reactnavigation/docs/en/stack-navigator.html#headertitlealign
after updated version in react-native: "0.60.0" we can handle the header title like this..under DefaultNavigationOptions|screenOptions|options
const navigator = createStackNavigator({
IndexScreen : IndexScreen,
},{
initialRouteName:"IndexScreen",
defaultNavigationOptions:{// or in screenOptions||options
title:"Blogs",
headerTitleAlign:"center"
}
});
本文标签： javascriptCan39t center title in react navigation stackReactNativeStack Overflow
版权声明：本文标题：javascript - Can't center title in react navigation stack - React-Native? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744969572a2635152.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论