ReactNative:如何中心文本? [英] ReactNative: how to center text?
问题描述
如何在ReactNative中横向和纵向放置文本?
我在rnplay.org中有一个示例应用程序,其中 justifyContent =center和 alignItems =center不工作:
https://rnplay.org/apps/AoxNKQ
文本应该居中。
为什么文本(黄色)和父容器之间的顶部有一个边距?
代码:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
SampleApp = React.createClass({
render:function(){
return(
< View style = {styles.container}>
< View style = {styles.topBox}>
< Text style = {styles.headline}> lorem ipsum {'\\\
'} 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',
},
$ b topBox:{
flex:1,
flexDirection:'row',
backgroundColor:'lightgray',
justifyContent:'center',
alignItems:'center',
},
标题:{
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;
来自标题
'style remove height
, justifyContent
和 alignItems
。它将垂直居中文本。添加 textAlign:'center'
,它将水平居中文本。
标题:{
textAlign:'center',//< - magic
fontWeight:'bold',
fontSize:18,
marginTop:0,
width:200,
backgroundColor:'yellow',
}
How to center Text in ReactNative both in horizontal and vertical?
I have an example application in rnplay.org where justifyContent="center" and alignItems="center" is not working: https://rnplay.org/apps/AoxNKQ
The text should being centered. And why is there a margin at the top between the text (yellow) and parent 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;
From headline
' style remove height
, justifyContent
and alignItems
. It will center the text vertically. Add textAlign: 'center'
and it will center the text horizontally.
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
这篇关于ReactNative:如何中心文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!