Wie zentriere ich Text in ReactNative sowohl horizontal als auch vertikal?
Ich habe in rnplay.org eine Beispielanwendung, bei der justifyContent = "center" und alignItems = "center" nicht funktioniert: 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;
Entfernen Sie im Stil headline
height
, justifyContent
und alignItems
. Der Text wird vertikal zentriert. Wenn Sie textAlign: 'center'
hinzufügen, wird der Text horizontal zentriert.
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
Bereits beantwortet von Ich möchte ein wenig mehr zum Thema hinzufügen und je nach Anwendungsfall unterschiedliche Wege gehen.
Sie können adjustsFontSizeToFit={true}
(derzeit undokumentiert) zu Ihrer Text
-Komponente hinzufügen, um die Größe in einem übergeordneten Knoten automatisch anzupassen.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
Sie können in 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 gesamten Blogbeitrag zum Thema lesen
Setzen Sie diese Stile auf die Bildkomponente: { textAlignVertical: "center", textAlign: "center" }
dies ist ein Beispiel für die gleichzeitige Ausrichtung von Horizontal und Vertical
<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
textAlignVertical: "center"
ist die wahre Magie.
Horizontale und Vertikale Mittenausrichtung
<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
Sie können die alignSelf
-Eigenschaft für die Textkomponente verwenden
{ alignSelf : "center" }
Wo immer Sie Text
-Komponente auf Ihrer Seite haben, müssen Sie nur den Stil der Test
-Komponente festlegen.
<Text style={{ textAlign: 'center' }}> Text here </Text>
sie müssen keine weitere Stileigenschaft hinzufügen. Dies ist eine spektakuläre Magie, mit der Sie Text in die Mitte Ihrer Benutzeroberfläche setzen.
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>
)
}
<View **style={{alignItems: 'center'}}**>
<Text>Hello im centered text{this.props.name}!</Text>
</View>
Zusätzlich zu den in den anderen Antworten genannten Anwendungsfällen:
Um den Text im speziellen Anwendungsfall von BottomTabNavigator zu zentrieren, müssen Sie showIcon auf false setzen (auch wenn Sie keine Symbole im TabNavigator haben). Andernfalls wird der Text in Richtung Tab unten verschoben.
Zum Beispiel:
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"
}
}