时间戳

首页 > 解决方案 > 在 React Native 中垂直对齐文本

javascript - 在 React Native 中垂直对齐文本

问题描述

在此处输入图像描述我想让我的文字在图片中变成这样。但我的文字没有垂直居中。如何实现？

到目前为止我所做的是

<Fragment>
     <HeaderMain navigation={navigation}/>
     <View style={styles.subheader}>
       <Text style={styles.topText}>Заказы</Text>
     </View>
</Fragment>

风格

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',
},

标签： javascriptcssreactjsreact-native

解决方案

你不应该使用justifyContent,alignItems在Text. 你应该在View. 还要给 lineHeight 与你的 fontSize 相同的值。像这样;

subheader:{
    height: 55,
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    justifyContent: 'center',
},

topText:{
    fontWeight: "bold",
    fontSize: 17,
    lineHeight: 21,
    fontFamily: MONREGULAR,
    marginLeft: 16,
},

推荐阅读