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;
reactjs
flexbox
react-native
itinance
quelle
quelle
Antworten:
Aus
headline
'Stil entfernenheight
,justifyContent
undalignItems
. Der Text wird vertikal zentriert. Fügen Sie hinzu,textAlign: 'center'
und der Text wird horizontal zentriert.quelle
width
sei denn, Sie wickeln es in ein<View>
mitjustifyContent: 'center', alignItems: 'center',
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}
derText
Komponente (derzeit nicht dokumentiert) hinzufügen , um die Größe innerhalb eines übergeordneten Knotens automatisch anzupassen.Sie können Ihrer Textkomponente auch Folgendes hinzufügen:
Oder Sie können dem übergeordneten Element der Textkomponente Folgendes hinzufügen:
oder beides
oder alle drei
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
quelle
textAlignVertical: "center", textAlign: "center"
, als <Text /> Komponentenstil.Setzen Sie diese Stile auf die Bildkomponente: {textAlignVertical: "center", textAlign: "center"}
quelle
ist die wahre Magie.
quelle
Dies ist ein Beispiel für die gleichzeitige horizontale und vertikale Ausrichtung
quelle
Horizontale und vertikale Mittelausrichtung
quelle
Sie können die
alignSelf
Eigenschaft für die Textkomponente verwendenquelle
Überall dort, wo Sie eine
Text
Komponente auf Ihrer Seite haben, müssen Sie nur den Stil derText
Komponente festlegen .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.
quelle
Einfach hinzufügen
in deinem styleSheet ist es das. Hoffe das würde helfen.
edit: "center"
quelle
Die folgende Eigenschaft kann verwendet werden:
{{alignItems: 'center'}}
quelle
gebraucht
Textausrichtung: Mitte
bei der Aussicht
quelle
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:
quelle
quelle
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