How to use the recact-navigation to center head headings?
up vote
2
down vote
favorite
Home: {
screen: Home,
headerTitleStyle: {
alignSelf: 'center',
}
HeaderTitleStyle is used for header style in code but does not take effect
reactjs react-native
asked Apr 3 at 9:31
Alex
216
add a comment |
up vote
2
down vote
favorite
Home: {
screen: Home,
headerTitleStyle: {
alignSelf: 'center',
}
HeaderTitleStyle is used for header style in code but does not take effect
reactjs react-native
asked Apr 3 at 9:31
Alex
216
2
Did you trytextAlign: 'center'or evenjustifyContent: 'center'?
– Tico
Apr 3 at 9:36
yes, These styles have been used but they have no effect
– Alex
Apr 3 at 9:39
They should work like css..that's weird, there's some GitHub Issues, check them. There's also a SO question. I'm not that experienced =/
– Tico
Apr 3 at 9:44
thank you, let me have a see
– Alex
Apr 3 at 9:47
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
Home: {
screen: Home,
headerTitleStyle: {
alignSelf: 'center',
}
HeaderTitleStyle is used for header style in code but does not take effect
reactjs react-native
asked Apr 3 at 9:31
Alex
216
Home: {
screen: Home,
headerTitleStyle: {
alignSelf: 'center',
}
HeaderTitleStyle is used for header style in code but does not take effect
reactjs react-native
reactjs react-native
asked Apr 3 at 9:31
Alex
216
asked Apr 3 at 9:31
Alex
216
asked Apr 3 at 9:31
Alex
216
asked Apr 3 at 9:31
Alex
216
asked Apr 3 at 9:31
Alex
216
216
2
Did you trytextAlign: 'center'or evenjustifyContent: 'center'?
– Tico
Apr 3 at 9:36
yes, These styles have been used but they have no effect
– Alex
Apr 3 at 9:39
They should work like css..that's weird, there's some GitHub Issues, check them. There's also a SO question. I'm not that experienced =/
– Tico
Apr 3 at 9:44
thank you, let me have a see
– Alex
Apr 3 at 9:47
add a comment |
2
Did you trytextAlign: 'center'or evenjustifyContent: 'center'?
– Tico
Apr 3 at 9:36
yes, These styles have been used but they have no effect
– Alex
Apr 3 at 9:39
They should work like css..that's weird, there's some GitHub Issues, check them. There's also a SO question. I'm not that experienced =/
– Tico
Apr 3 at 9:44
thank you, let me have a see
– Alex
Apr 3 at 9:47
2
2
Did you try
textAlign: 'center' or even justifyContent: 'center'?– Tico
Apr 3 at 9:36
Did you try
textAlign: 'center' or even justifyContent: 'center'?– Tico
Apr 3 at 9:36
yes, These styles have been used but they have no effect
– Alex
Apr 3 at 9:39
yes, These styles have been used but they have no effect
– Alex
Apr 3 at 9:39
They should work like css..that's weird, there's some GitHub Issues, check them. There's also a SO question. I'm not that experienced =/
– Tico
Apr 3 at 9:44
They should work like css..that's weird, there's some GitHub Issues, check them. There's also a SO question. I'm not that experienced =/
– Tico
Apr 3 at 9:44
thank you, let me have a see
– Alex
Apr 3 at 9:47
thank you, let me have a see
– Alex
Apr 3 at 9:47
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
I have encountered this issue on Android devices. After searching for a while, there were many suggestions to use alignSelf: 'center'. However it wasn't fixed with it. But I was able to fix it by textAlign: 'center' and flex: 1
You could specify the navigationOptions in your component:
static navigationOptions = {
headerTitleStyle: { textAlign: 'center', flex: 1 },
};
UPDATED:
The best solution is to use headerLayoutPreset: 'center' in createStackNavigator()
const MainStack = createStackNavigator({
screen: YourScreen,
navigationOptions: {
title: 'Title'
}
},
{
headerLayoutPreset: 'center'
});
I hope this should work:-)
answered Nov 11 at 18:33
Hussain Thajutheen
814
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
add a comment |
up vote
1
down vote
static navigationOptions = {
headTtle: () => (
<View style={styles.headerWrapper}>
<Text
adjustsFontSizeToFit
style={styles.headerText}>首页</Text>
</View>
)
}
const styles = StyleSheet.create({
headerWrapper: {
flex: 1
},
headerText: {
textAlign: 'center', // ok
alignSelf: 'center', // ok
}
});
In this way can be solved， it's work
answered Apr 3 at 10:01
Alex
216
Nice! I hope I could help
– Tico
Apr 3 at 10:04
1
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49626664%2fhow-to-use-the-recact-navigation-to-center-head-headings%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
I have encountered this issue on Android devices. After searching for a while, there were many suggestions to use alignSelf: 'center'. However it wasn't fixed with it. But I was able to fix it by textAlign: 'center' and flex: 1
You could specify the navigationOptions in your component:
static navigationOptions = {
headerTitleStyle: { textAlign: 'center', flex: 1 },
};
UPDATED:
The best solution is to use headerLayoutPreset: 'center' in createStackNavigator()
const MainStack = createStackNavigator({
screen: YourScreen,
navigationOptions: {
title: 'Title'
}
},
{
headerLayoutPreset: 'center'
});
I hope this should work:-)
answered Nov 11 at 18:33
Hussain Thajutheen
814
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
add a comment |
up vote
2
down vote
I have encountered this issue on Android devices. After searching for a while, there were many suggestions to use alignSelf: 'center'. However it wasn't fixed with it. But I was able to fix it by textAlign: 'center' and flex: 1
You could specify the navigationOptions in your component:
static navigationOptions = {
headerTitleStyle: { textAlign: 'center', flex: 1 },
};
UPDATED:
The best solution is to use headerLayoutPreset: 'center' in createStackNavigator()
const MainStack = createStackNavigator({
screen: YourScreen,
navigationOptions: {
title: 'Title'
}
},
{
headerLayoutPreset: 'center'
});
I hope this should work:-)
answered Nov 11 at 18:33
Hussain Thajutheen
814
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
add a comment |
up vote
2
down vote
up vote
2
down vote
I have encountered this issue on Android devices. After searching for a while, there were many suggestions to use alignSelf: 'center'. However it wasn't fixed with it. But I was able to fix it by textAlign: 'center' and flex: 1
You could specify the navigationOptions in your component:
static navigationOptions = {
headerTitleStyle: { textAlign: 'center', flex: 1 },
};
UPDATED:
The best solution is to use headerLayoutPreset: 'center' in createStackNavigator()
const MainStack = createStackNavigator({
screen: YourScreen,
navigationOptions: {
title: 'Title'
}
},
{
headerLayoutPreset: 'center'
});
I hope this should work:-)
answered Nov 11 at 18:33
Hussain Thajutheen
814
I have encountered this issue on Android devices. After searching for a while, there were many suggestions to use alignSelf: 'center'. However it wasn't fixed with it. But I was able to fix it by textAlign: 'center' and flex: 1
You could specify the navigationOptions in your component:
static navigationOptions = {
headerTitleStyle: { textAlign: 'center', flex: 1 },
};
UPDATED:
The best solution is to use headerLayoutPreset: 'center' in createStackNavigator()
const MainStack = createStackNavigator({
screen: YourScreen,
navigationOptions: {
title: 'Title'
}
},
{
headerLayoutPreset: 'center'
});
I hope this should work:-)
answered Nov 11 at 18:33
Hussain Thajutheen
814
edited Nov 11 at 19:37
answered Nov 11 at 18:33
Hussain Thajutheen
814
answered Nov 11 at 18:33
Hussain Thajutheen
814
answered Nov 11 at 18:33
Hussain Thajutheen
814
814
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
add a comment |
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Thank you,Did you use this method to take effect?
– Alex
Nov 30 at 9:33
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
Yes, I have used it in my projects. This is the best solution I found for this issue.
– Hussain Thajutheen
Dec 2 at 3:58
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
You're welcome!
– Hussain Thajutheen
Dec 3 at 16:42
add a comment |
up vote
1
down vote
static navigationOptions = {
headTtle: () => (
<View style={styles.headerWrapper}>
<Text
adjustsFontSizeToFit
style={styles.headerText}>首页</Text>
</View>
)
}
const styles = StyleSheet.create({
headerWrapper: {
flex: 1
},
headerText: {
textAlign: 'center', // ok
alignSelf: 'center', // ok
}
});
In this way can be solved， it's work
answered Apr 3 at 10:01
Alex
216
Nice! I hope I could help
– Tico
Apr 3 at 10:04
1
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
add a comment |
up vote
1
down vote
static navigationOptions = {
headTtle: () => (
<View style={styles.headerWrapper}>
<Text
adjustsFontSizeToFit
style={styles.headerText}>首页</Text>
</View>
)
}
const styles = StyleSheet.create({
headerWrapper: {
flex: 1
},
headerText: {
textAlign: 'center', // ok
alignSelf: 'center', // ok
}
});
In this way can be solved， it's work
answered Apr 3 at 10:01
Alex
216
Nice! I hope I could help
– Tico
Apr 3 at 10:04
1
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
add a comment |
up vote
1
down vote
up vote
1
down vote
static navigationOptions = {
headTtle: () => (
<View style={styles.headerWrapper}>
<Text
adjustsFontSizeToFit
style={styles.headerText}>首页</Text>
</View>
)
}
const styles = StyleSheet.create({
headerWrapper: {
flex: 1
},
headerText: {
textAlign: 'center', // ok
alignSelf: 'center', // ok
}
});
In this way can be solved， it's work
answered Apr 3 at 10:01
Alex
216
static navigationOptions = {
headTtle: () => (
<View style={styles.headerWrapper}>
<Text
adjustsFontSizeToFit
style={styles.headerText}>首页</Text>
</View>
)
}
const styles = StyleSheet.create({
headerWrapper: {
flex: 1
},
headerText: {
textAlign: 'center', // ok
alignSelf: 'center', // ok
}
});
In this way can be solved， it's work
answered Apr 3 at 10:01
Alex
216
answered Apr 3 at 10:01
Alex
216
answered Apr 3 at 10:01
Alex
216
answered Apr 3 at 10:01
Alex
216
216
Nice! I hope I could help
– Tico
Apr 3 at 10:04
1
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
add a comment |
Nice! I hope I could help
– Tico
Apr 3 at 10:04
1
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
Nice! I hope I could help
– Tico
Apr 3 at 10:04
Nice! I hope I could help
– Tico
Apr 3 at 10:04
1
1
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
yes,sure, where are you from?， Can I add a contact method?
– Alex
Apr 3 at 10:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49626664%2fhow-to-use-the-recact-navigation-to-center-head-headings%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Did you try
textAlign: 'center'or evenjustifyContent: 'center'?– Tico
Apr 3 at 9:36
yes, These styles have been used but they have no effect
– Alex
Apr 3 at 9:39
They should work like css..that's weird, there's some GitHub Issues, check them. There's also a SO question. I'm not that experienced =/
– Tico
Apr 3 at 9:44
thank you, let me have a see
– Alex
Apr 3 at 9:47