[英]Align Text Vertically in React Native
我想让我的文字在图片中变成这样。 但我的文字没有垂直居中。 如何实现?
到目前为止我所做的是
<Fragment>
<HeaderMain navigation={navigation}/>
<View style={styles.subheader}>
<Text style={styles.topText}>Заказы</Text>
</View>
</Fragment>
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',
},
您不应该在Text
中使用justifyContent
和alignItems
。 您应该在View
中使用它。 还要给 lineHeight 与你的 fontSize 相同的值。 像这样;
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
justifyContent: 'center',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight: 21,
fontFamily: MONREGULAR,
marginLeft: 16,
},
试试这个子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 和 justifyContent 用于调整视图中的组件。 如果您想要的是将内容集中在您应该使用的文本中: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.