web-dev-qa-db-fra.com

Comment pouvons-nous centrer le titre de l'en-tête réact-navigation?

Les documents de React-navigation sont encore jeunes et la lecture de ces problèmes ne fonctionne pas très bien pour moi (modifications sur chaque version). Quelqu'un a-t-il une méthode de travail pour centrer le titre dans Android à l'aide de react-navigation dans React Native?

react-nativereact-native-androidreact-navigation
7
jsdario

Utilisez headerTitleStyle :

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

 enter image description here

5
Val

Pour centrer le titre de l'en-tête, nous avons besoin d'en-tête flex avec la propriété add flex.

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

La réponse acceptée ne fonctionne pour moi que s'il n'y a pas de bouton de retour sur le côté gauche. Dans ce cas, vous devez définir une vue vide sur le côté droit pour la centrer correctement. 

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

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

ici . => {flex:1 ,textAlign: 'center' and alignSelf: 'center'} fonctionne pour moi! 

0
Akshita Agarwal

Utilisez headerTitleContainerStyle

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

Définissez le titre de l'en-tête réact-navigation au centre. Utilisation du CSS headerTitleStyle.

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