Как мы можем центрировать название заголовка реакции-навигации?

Ответ 1

Используйте headerTitleStyle:

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

Изменено в 2019/03/12:

В 2018 году, после выпуска реакции-навигации v2 (7 апреля 2018 года), по какой-то причине alignSelf больше не работал. Здесь это новый рабочий способ, использующий headerLayoutPreset. от @HasanSH:

const HomeActivity_StackNavigator = createStackNavigator({
    Home: {screen: Main},
}, {headerLayoutPreset: 'center'});

Ответ 2

Чтобы центрировать заголовок заголовка, нам нужно иметь заголовок flex, добавив свойство flex.

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}

Ответ 3

Принятый ответ работает только для меня, если в левой части нет кнопки "Назад". В этом случае вам необходимо установить пустой вид в правую сторону, чтобы правильно центрировать его.

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}

Ответ 4

Лучший способ сделать это - реализовать то, что указано в документации: внутри StackNavigatorConfig назначьте необязательное свойство следующим образом:

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset - Определяет, как расположить компоненты заголовка.

Делая это, вам совсем не нужно портить стиль. И это будет применяться ко всем вложенным экранам в этом стеке.

Проверьте источник

Ответ 5

Это сработало для меня :)

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

Ответ 6

headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}

Ответ 7

Задайте заголовок заголовка реакции-навигации в центре. Использование CSS-заголовка titleTitleStyle.

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };

Ответ 8

Используйте headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}

Ответ 9

navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,

                    headerTitleStyle : {
                            color:"white",
                            fontFamily:"OpenSans",
                            alignSelf: 'center' ,
                            textAlign: 'center',
                            flex:1
                    },
                  }),

Вот. => {flex:1 ,textAlign: 'center' and alignSelf: 'center'} работает для меня!

Ответ 10

Вы должны добавить headerLayoutPreset: 'center' к вашей функции createeStackNavigator.

Это единственный верный путь:

const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });

Ссылка: https://github.com/react-navigation/react-navigation/pull/4588

Ответ 11

Это работает для меня на Android & IOS:

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};

Ответ 12

headerTitleStyle: {   белый цвет',   textAlign: 'центр',   flex: 1 }

Ответ 13

Это определенно будет работать для Android

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },

Ответ 14

Удостоверьтесь, что вы проверяете проблемы до того, как получилось переполнение стека, обычно более полезно. вопрос о вашей проблеме Но, как сказал himanshu в комментариях, вы необходимо получить доступ к свойству стиля заголовка, чтобы настроить заголовок так, как вы хотите.

static navigationOptions = {
    header: (navigation) => ({
      title: <Text style={{ 
            color: 'rgba(0, 0, 0, .9)', 
            fontWeight: Platform.OS === 'ios' ? '600' : '500',  
            fontSize: Platform.OS === 'ios' ? 17 : 18, 
            alignSelf: 'center' 
         }}>Filters</Text>,
      right: <SearchButton />,
      left: <CancelButton />,
    })
  };

Как показано в этом выпуске, я предполагаю, что вам уже удалось найти решение, как это было недавно. Но для тех, кто сталкивается с этой проблемой, это может быть полезно.

Ответ 15

Вы можете установить центр заголовка заголовка для андроида в навигаторе стека, чтобы изменить навигацию с помощью этого файла:

node_modules\react-navigation\src\views\Header.js

Измените этот код в файле Header.js: -

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: Platform.OS === 'ios' ? 'center' : 'center',
},