webentwicklung-frage-antwort-db.com.de

Wie können wir den Titel des reag-navigation-Headers zentrieren?

React-navigation docs sind noch jung und das Durchlesen der Probleme funktioniert für mich nicht ganz (Änderungen bei jeder Version). Hat jemand eine Arbeitsmethode, um den Titel in Android mit react-navigation in React Native zu zentrieren?

7
jsdario

Verwenden Sie headerTitleStyle :

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

 enter image description here

5
Val

Um den Headertitel zu zentrieren, benötigen wir den Flex-Header durch die Flex-Eigenschaft.

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

Die akzeptierte Antwort funktioniert nur für mich, wenn auf der linken Seite kein Zurück-Button vorhanden ist. In diesem Fall müssen Sie eine leere Ansicht zur rechten Seite setzen, um sie richtig zu zentrieren. 

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

Am besten tun Sie dies, indem Sie das implementieren, was in der Dokumentation aufgeführt ist: Weisen Sie in der Variablen StackNavigatorConfig eine optionale Eigenschaft wie folgt zu:

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

headerLayoutPreset - Gibt an, wie die Kopfkomponenten angeordnet werden. 

Auf diese Weise müssen Sie sich überhaupt nicht mit dem Styling beschäftigen. Und es würde auf alle verschachtelten Bildschirme in diesem Stapel angewendet.

Überprüfen Sie die Quelle

8
Hasan Sh

Das hat bei mir funktioniert :)

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

};

3
Pavitha

Dies funktioniert für mich auf Android & iOS:

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

Sie sollten headerLayoutPreset: 'center' zu Ihrer Funktion createeStackNavigator hinzufügen.

Dies ist der einzig wahre Weg:

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

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

1
Daniel S.
navigationOptions:({navigation}) =>({
                            gesturesEnabled :false,

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

hier . => {flex:1 ,textAlign: 'center' and alignSelf: 'center'} funktioniert für mich! 

0
Akshita Agarwal

Verwenden Sie headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}
0
Omri Givoni

Setzen Sie den Titel für den Titel der Reaktionsnavigation in der Mitte. Verwenden des headerTitleStyle-CSS.

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };
0
Asif vora
headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}
0
Akhila Antony

Dies wird definitiv für Android funktionieren

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },
0
M.Hassam Yahya