Документы для интерактивной навигации еще молоды, и чтение вопросов не работает для меня много (изменения в каждой версии), у кого-нибудь есть рабочий метод для центра заголовка в Android с помощью react-navigation
в React Native?
Как мы можем центрировать название заголовка реакции-навигации?
Ответ 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',
},