[英]Align Text Vertically in React Native
I want to make my text like this in the picture.
我想让我的文字在图片中变成这样。 But my text is not centring vertically.
但我的文字没有垂直居中。 How to achieve it?
如何实现?
What I have done so far is到目前为止我所做的是
<Fragment>
<HeaderMain navigation={navigation}/>
<View style={styles.subheader}>
<Text style={styles.topText}>Заказы</Text>
</View>
</Fragment>
Styles Styles
container: {
flex: 1,
paddingHorizontal: 8,
paddingVertical: 7,
backgroundColor: '#E5E5E5',
},
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight:21,
fontFamily: MONREGULAR,
marginLeft: 16,
justifyContent: 'center',
alignItems: 'center',
},
You should not use justifyContent
, alignItems
in Text
.您不应该在
Text
中使用justifyContent
和alignItems
。 You should use it in View
.您应该在
View
中使用它。 Also give lineHeight same values as your fontSize.还要给 lineHeight 与你的 fontSize 相同的值。 Like this;
像这样;
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
justifyContent: 'center',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight: 21,
fontFamily: MONREGULAR,
marginLeft: 16,
},
Try this subheader
should be of display:flex
and flex-direction:column
topText
should have justify-content:space-around
试试这个子
topText
应该是display:flex
和flex-direction:column
subheader
应该有justify-content:space-around
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
display: flex;
}
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight:21,
fontFamily: MONREGULAR,
marginLeft: 16,
justifyContent: 'space-around'
}
alignItems and justifyContent are used to adjust components within a view. alignItems 和 justifyContent 用于调整视图中的组件。 If what you want is to center the content within a text you should use: textAlign, in your case I think you should use:
如果您想要的是将内容集中在您应该使用的文本中:textAlign,在您的情况下,我认为您应该使用:
textAlign: "center"
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight: 21,
fontFamily: MONREGULAR,
marginLeft: 16,
justifyContent: 'center',
alignItems: 'center',
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.