在 React Native 中垂直對齊文本

Question

我想讓我的文字在圖片中變成這樣。 但我的文字沒有垂直居中。 如何實現？

到目前為止我所做的是

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

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

Answer 2

試試這個子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'
}

Answer 3

alignItems 和 justifyContent 用於調整視圖中的組件。 如果您想要的是將內容集中在您應該使用的文本中：textAlign，在您的情況下，我認為您應該使用：

textAlign: "center"

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