ReactNative: как центрировать текст?
как центрировать текст в реактивном как по горизонтали, так и по вертикали?
У меня есть пример приложения в rnplay.org где justifyContent="центр" и alignItems= "center" не работает: https://rnplay.org/apps/AoxNKQ
текст должен быть по центру. И почему в верхней части есть поле между текстом (желтым) и родительским контейнером?
код:
'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;
7 ответов
С ' удалить height
, justifyContent
и alignItems
. Он будет центрировать текст по вертикали. Добавить textAlign: 'center'
и он будет центрировать текст по горизонтали.
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
уже ответил, я хотел бы добавить немного больше по теме, и различные способы сделать это в зависимости от вашего варианта использования.
вы можете добавить adjustsFontSizeToFit={true}
(в настоящее время без документов), чтобы вы Text
компонент для автоматической настройки размера внутри родительского узла.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
вы также можете добавить следующее в ваш текстовый компонент:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
или вы можете добавить следующее в родительский компонент текста:
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text>Hiiiz</Text>
</View>
или оба!--8-->
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
или все три
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text adjustsFontSizeToFit={true}
numberOfLines={1}
style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
все зависит от того, что ты делаешь. Вы также можете проверить мой полный пост в блоге по теме
Это пример горизонтальный и вертикальный выравнивание одновременно
<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
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={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>