ReactNative: comment faire pour centrer le texte?

Comment faire pour centrer le Texte dans ReactNative à la fois horizontal et vertical?

J'ai un exemple d'application dans rnplay.org où justifyContent="center" et alignItems="center" ne fonctionne pas:
https://rnplay.org/apps/AoxNKQ

Le texte doit être centré.
Et pourquoi est-il une marge en haut entre le texte (jaune) et le conteneur parent?

Code:

'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
<Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>
</View>
<View style={styles.otherContainer}>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
},
topBox: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'lightgray',
justifyContent: 'center',
alignItems: 'center',
},
headline: {
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
height: 80,
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center',
},
otherContainer: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
  • Comme ceci: rnplay.org/apps/1hbnSA ?
  • ce n'est pas horizontal centré
  • ok, donc ceci: rnplay.org/apps/1hbnSA, mis à jour
  • WAAAA... textAlign ? je savais que ça allait être quelque chose de vraiment stupide.... vous devriez poster cela comme une réponse
  • Fait! 🙂 Content que ça a fonctionné pour vous..
InformationsquelleAutor itinance | 2016-06-01
  1. 239

    De headline' style supprimer height, justifyContent et alignItems. Il va centrer le texte verticalement. Ajouter textAlign: 'center' et il va centrer le texte horizontalement.

      headline: {
textAlign: 'center', //<-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
    • Ne fonctionne pas avec un width à moins que vous l'envelopper dans un <View> avec justifyContent: 'center', alignItems: 'center',
    • J'aime "magique"!!!
    InformationsquelleAutor Cherniv
  2. 38

    Déjà répondu par je tiens à ajouter un peu plus sur le sujet et les différentes façons de le faire selon votre cas d'utilisation.

    Vous pouvez ajouter adjustsFontSizeToFit={true} (actuellement sans papiers) pour vous Text Composant de réglage automatique de la taille à l'intérieur d'un nœud parent. 

      <Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>

    Vous pouvez également ajouter la ligne suivante dans votre Texte:

    <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>

    Ou vous pouvez ajouter la ligne suivante dans le parent de l'élément de Texte:

    <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text>Hiiiz</Text>
</View>

    ou les deux

     <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

    ou tous les trois

     <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text adjustsFontSizeToFit={true} 
numberOfLines={1} 
style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

    Tout dépend de ce que vous faites. Vous pouvez aussi regarder mon blog sur le thème

    https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

    • textAlignVertical: "centre", en fait le tour.....merci @garrettmac
    InformationsquelleAutor garrettmac
  3. 13

    Définir ces styles à l'image de la composante:
    {
    textAlignVertical: "centre",
    textAlign: "centre"
    }

    InformationsquelleAutor mocanSergiu666
  4. 7

    c'est un exemple pour Horizontale et Verticale alignement simultanément

    <View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
    • Merci pour l'astuce que des styles en ligne doivent être inclus dans {{double-bouclés-accolades}}.
    InformationsquelleAutor Mahdi Bashirpour
  5. 7
    textAlignVertical: "center"

    est la véritable magie.

    InformationsquelleAutor Muzammil
  6. 3

    Horizontale et Verticale alignement au centre

    <View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
    InformationsquelleAutor Mahdi Bashirpour
  7. 2

    Vous pouvez utiliser alignSelf de propriété sur le Texte de la composante

    { alignSelf : "center" }
    InformationsquelleAutor Meenu Negi
  8. 1

    Partout où vous avez Text composant dans votre page, vous devez définir le style de la Test composant.

     <Text style={{ textAlign: 'center' }}> Text here </Text>

    vous n'avez pas besoin d'ajouter de tout autre style de propriété, c'est spectaculaire de la magie, il va vous mettre le texte au centre de votre INTERFACE utilisateur.

    InformationsquelleAutor Hardik Virani
  9. 0
    const styles = StyleSheet.create({
navigationView: {
height: 44,
width: '100%',
backgroundColor:'darkgray',
justifyContent: 'center', 
alignItems: 'center' 
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
})
render() {
return (
<View style = { styles.navigationView }>
<Text style = { styles.titleText } > Title name here </Text>
</View>
)
}
    InformationsquelleAutor Giang
  10. 0

    Outre les cas d'utilisation mentionnées dans les autres réponses:

    Pour centrer le texte dans le cas d'utilisation spécifiques d'un BottomTabNavigator, n'oubliez pas de régler showIcon à faux (même si vous n'avez pas d'icônes dans la TabNavigator). Sinon le texte sera poussé vers le bas de l'Onglet.

    Par exemple:

    const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen
}, {
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showIcon: false, //do this
labelStyle: {
fontSize: 20,
textAlign: 'center',
},
tabStyle: {
backgroundColor: 'grey',
marginTop: 0,
textAlign: 'center',
justifyContent: 'center',
textAlignVertical: "center"
}
}
    InformationsquelleAutor Gunnar Karlsson