web-dev-qa-db-fra.com

React Native: comment centrer le texte?

Comment centrer le texte dans ReactNative à la fois horizontalement et verticalement?

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

Le texte doit être centré. Et pourquoi y a-t-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;
reactjsflexboxreact-native
117
itinance

Du style headline ', supprimez height, justifyContent et alignItems Il va centrer le texte verticalement. Ajoutez textAlign: 'center' et le texte sera centré horizontalement.

  headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }
198
Cherniv

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

Vous pouvez ajouter adjustsFontSizeToFit={true} (actuellement non documenté) à votre Text composant pour ajuster automatiquement la taille à l'intérieur d'un nœud parent. 

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

Vous pouvez également ajouter les éléments suivants dans votre composant texte:

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

Ou vous pouvez ajouter les éléments suivants dans le parent du composant 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 également consulter mon article de blog complet sur le sujet

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

30
garrettmac

Définissez ces styles sur le composant image: { textAlignVertical: "center", textAlign: "center" }

12
mocanSergiu666

ceci est un exemple pour Horizontal et Vertical alignement simultané

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>
6
Mahdi Bashirpour
textAlignVertical: "center"

est la vraie magie.

6
Muzammil

Horizontal et Vertical alignement central

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

Vous pouvez utiliser la propriété alignSelf sur le composant Text

{ alignSelf : "center" }
1
Meenu Negi

Où que vous ayez un composant Text dans votre page, vous devez définir le style du composant Test.

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

vous n'avez pas besoin d'ajouter une autre propriété de style, c'est une magie spectaculaire qui placera le texte au centre de l'interface utilisateur.

1
Hardik Virani
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>
    )

}
0
Giang
 <View **style={{alignItems: 'center'}}**>

    <Text>Hello im centered text{this.props.name}!</Text>

      </View>
0
تقنيتي Taknity

En plus des cas d'utilisation mentionnés dans les autres réponses:

Pour centrer le texte dans le cas d'utilisation spécifique d'un BottomTabNavigator , n'oubliez pas de définir showIcon sur false (même si vous n'avez pas d'icône dans TabNavigator). Sinon, le texte sera poussé vers le bas de la tabulation.

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"
    }
  }
0
Gunnar Karlsson