ReactNative: Wie zentriere ich Text?

212

Wie zentriere ich Text in ReactNative sowohl horizontal als auch vertikal?

Ich habe eine Beispielanwendung in rnplay.org, in der adjustContent = "center" und alignItems = "center" nicht funktionieren: https://rnplay.org/apps/AoxNKQ

Der Text sollte zentriert sein. Und warum befindet sich oben ein Rand zwischen dem Text (gelb) und dem übergeordneten Container?

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;
itinance
quelle
So: rnplay.org/apps/1hbnSA ?
Cherniv
Dies ist nicht horizontal zentriert
itinance
1
ok, also das hier: rnplay.org/apps/1hbnSA , aktualisiert
Cherniv
WAAAA ... textAlign? Ich wusste, dass es etwas wirklich Dummes sein würde ... Sie sollten dies als Antwort
posten

Antworten:

356

Aus headline'Stil entfernen height, justifyContentund alignItems. Der Text wird vertikal zentriert. Fügen Sie hinzu, textAlign: 'center'und der Text wird horizontal zentriert.

  headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }
Cherniv
quelle
16
Funktioniert nicht mit einem, es widthsei denn, Sie wickeln es in ein <View>mitjustifyContent: 'center', alignItems: 'center',
Ryan Walker
59

Bereits beantwortet, aber ich möchte etwas mehr zum Thema und zu verschiedenen Möglichkeiten hinzufügen, je nach Anwendungsfall.

Sie können adjustsFontSizeToFit={true}der TextKomponente (derzeit nicht dokumentiert) hinzufügen , um die Größe innerhalb eines übergeordneten Knotens automatisch anzupassen.

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

Sie können Ihrer Textkomponente auch Folgendes hinzufügen:

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

Oder Sie können dem übergeordneten Element der Textkomponente Folgendes hinzufügen:

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

oder beides

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

oder alle drei

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

Es hängt alles davon ab, was Sie tun. Sie können auch meinen vollständigen Blog-Beitrag zum Thema lesen

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

Garrettmac
quelle
Dies sollte erwartet werden: <Text style = {{textAlignVertical: "center", textAlign: "center",}}> Hiiiz </ Text>
Tushar Pandey
Mann, du hast meine 1,5 Stunden gerettet. Ich habe versucht, dasselbe zu tun, konnte es aber bis zu dieser Antwort nicht als : textAlignVertical: "center", textAlign: "center" , als <Text /> Komponentenstil.
Ganeshdeshmukh
textAlignVertical ist nur für Android verfügbar. Keine dieser Lösungen richtet meinen Text vertikal aus, nur horizontal.
Sudo
14

Setzen Sie diese Stile auf die Bildkomponente: {textAlignVertical: "center", textAlign: "center"}

mocanSergiu666
quelle
13
textAlignVertical: "center"

ist die wahre Magie.

Muzammil
quelle
9

Dies ist ein Beispiel für die gleichzeitige horizontale und vertikale Ausrichtung

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>
Bashirpour
quelle
Vielen Dank für den Tipp, dass Inline-Stile in {{doppelte geschweifte Klammern}} eingeschlossen werden müssen.
MarkHu
6

Horizontale und vertikale Mittelausrichtung

<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
     <Text> Example Test </Text>
</View>
Bashirpour
quelle
Einzige Lösung, die für mich hinsichtlich der Zentrierung von <Text> in einer <View> nicht nur horizontal, sondern auch vertikal funktioniert hat. Danke dir!
RuntimeError
4

Sie können die alignSelfEigenschaft für die Textkomponente verwenden

{ alignSelf : "center" }
Meenu Negi
quelle
4

Überall dort, wo Sie eine TextKomponente auf Ihrer Seite haben, müssen Sie nur den Stil der TextKomponente festlegen .

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

Sie müssen keine andere Stileigenschaft hinzufügen. Dies ist eine spektakuläre Magie, mit der Sie Text in die Mitte Ihrer Benutzeroberfläche setzen.

Hardik Virani
quelle
2

Einfach hinzufügen

textAlign: "center"

in deinem styleSheet ist es das. Hoffe das würde helfen.

edit: "center"

Raghib Arshi
quelle
2

Die folgende Eigenschaft kann verwendet werden: {{alignItems: 'center'}}

<View style={{alignItems: 'center'}}>
 <Text>Hello im centered text{this.props.name}!</Text>
</View>
Omar bakhsh
quelle
1
Auch wenn dies die Lösung für die Frage sein mag, fügen Sie bitte weitere Erklärungen hinzu, damit wir alle lernen können.
Mundharmonika141
Bitte verbessern Sie es, weil Sie zwei Sternchen verwenden, um die Hauptkorrektur zu verteilen, aber es ist nicht klar und der andere Teil ist verwirrend
Frederiko Cesar
2

gebraucht

Textausrichtung: Mitte

bei der Aussicht

Sanjib Suna
quelle
1

Zusätzlich zu den in den anderen Antworten genannten Anwendungsfällen:

Denken Sie daran, showIcon auf false zu setzen, um Text im speziellen Anwendungsfall eines BottomTabNavigator zu zentrieren (auch wenn der TabNavigator keine Symbole enthält). Andernfalls wird der Text zum unteren Rand der Registerkarte verschoben.

Beispielsweise:

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

}
Giang
quelle
0

Fügen Sie zuerst in der übergeordneten Ansicht flex: 1 hinzu, rechtfertigen Sie den Inhalt: 'center', alignItems: 'center'

Fügen Sie dann im Text textAlign hinzu: 'center'


quelle