我们如何将反应导航标题的标题集中在一起？

Posted 2021-04-04

反应导航文档仍然很年轻，阅读问题对我来说并不是很有用（每个版本的更改）有没有人有一个工作方法在android中使用qactxswpoi在React Native中居中？

答案

使用react-navigation：

headerTitleStyle

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

修改后的2019/03/12：

在2018年，反应导航v2发布后（2018年4月7日），由于某种原因，不再工作了。这是使用alignSelf的新工作方式。来自@HasanSH：

headerLayoutPreset

另一答案

您应该将headerLayoutPreset：'center'添加到createStackNavigator函数中。

这是一种真实的方式：

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

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

另一答案

您可以使用此文件更改在反应导航的堆栈导航器中为android设置标题标题中心：

https://github.com/react-navigation/react-navigation/pull/4588

在Header.js文件中更改此代码： -

node_modules
eact-navigationsrcviewsHeader.js

另一答案

确保在导致堆栈溢出之前检查问题，通常更有帮助.title: { bottom: 0, left: TITLE_OFFSET, right: TITLE_OFFSET, top: 0, position: 'absolute', alignItems: Platform.OS === 'ios' ? 'center' : 'center', }, 但是正如himanshu在评论中所说，你需要访问title style属性来调整你想要的标题。

issue regarding your problem

如问题所示，我认为你已经设法找到一个解决方案，因为这是不久前。但对于遇到此问题的其他人来说，这可能会有所帮助。

另一答案

要使标题标题居中，我们需要通过添加flex属性来设置flex标头。

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

另一答案

如果左侧没有后退按钮，则接受的答案仅适用于我。在这种情况下，您需要在右侧设置一个空视图以正确居中。

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

另一答案

最好的方法是实现文档中列出的内容：在static navigationOptions = { headerTitleStyle: { alignSelf: 'center' }, title: 'Center Title', headerRight: (<View />) } 内部分配一个可选属性，如下所示：

StackNavigatorConfig

createStackNavigator({ { ... // your screens}, { ..., headerLayoutPreset: 'center' // default is 'left' }) - 指定如何布置标题组件。

通过这样做，您根本不必弄乱样式。它将应用于该堆栈中的所有嵌套屏幕。

检查headerLayoutPreset

另一答案

This worked for me :)

Source

};

另一答案

在中心设置react-navigation标题标题。使用headerTitleStyle CSS。

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

另一答案

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

这里 。 => navigationOptions:({navigation}) =>({ gesturesEnabled :false, headerTitleStyle : { color:"white", fontFamily:"OpenSans", alignSelf: 'center' , textAlign: 'center', flex:1 }, }), 适合我！

另一答案

{flex:1 ,textAlign: 'center' and   alignSelf: 'center'}

另一答案

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

headerTitleContainerStyle