在 React Native 中垂直对齐文本答案

【问题标题】：Align Text Vertically in React Native在 React Native 中垂直对齐文本
【发布时间】：2019-10-30 11:45:55
【问题描述】：

我想让我的文字在图片中变成这样。但我的文字没有垂直居中。如何实现？

到目前为止我所做的是

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

【问题讨论】：

您的子标题视图没有结束标记。
无意中忘记添加了，谢谢提及
但问题在队列中

标签： javascript css reactjs react-native

【解决方案1】：

您不应在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,
},

【讨论】：

你居中但不喜欢这张照片
删除justifyContent: center。

【解决方案2】：

alignItems 和 justifyContent 用于调整视图中的组件。如果您想要将内容居中放置在您应该使用的文本中：textAlign，在您的情况下，我认为您应该使用：

textAlign: "center"

【讨论】：

【解决方案3】：

试试这个 subheader 应该是 display:flex 和 flex-direction:column topText 应该有 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'
}

【讨论】：

【解决方案4】：

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

【讨论】：