6
Home: {
  screen: Home,
  headerTitleStyle: {
    alignSelf: 'center',
  }

HeaderTitleStyle is used for header style in code but does not take effect

Nicolai Lissau
  • 7,298
  • 5
  • 43
  • 57
Alex
  • 101
  • 1
  • 2
  • 8
  • 2
    Did you try `textAlign: 'center'` or even `justifyContent: 'center'`? – trinaldi Apr 03 '18 at 09:36
  • yes, These styles have been used but they have no effect – Alex Apr 03 '18 at 09:39
  • They should work like css..that's weird, there's some [GitHub Issues](https://github.com/react-navigation/react-navigation/issues/544), [check them](https://github.com/react-navigation/react-navigation/issues/253). There's also a [SO question](https://stackoverflow.com/questions/43326705/how-can-we-center-title-of-react-navigation-header). I'm not that experienced =/ – trinaldi Apr 03 '18 at 09:44
  • thank you, let me have a see – Alex Apr 03 '18 at 09:47
  • Possible duplicate of [How can we center title of react-navigation header?](https://stackoverflow.com/questions/43326705/how-can-we-center-title-of-react-navigation-header) – Nicolai Lissau Jul 09 '19 at 08:21

3 Answers3

8

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:-)

Hussain Thajutheen
  • 441
  • 4
  • 5
5

On the newer versions (2020) you should use (inside navigationOptions), this: headerTitleAlign: 'center' It should work! ;)

Luciano Santos
  • 153
  • 2
  • 12
1
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

Alex
  • 101
  • 1
  • 2
  • 8