React-Native：在一个View组件中将两个文本组件居中

Question

我想在他们的组件到中心两个独立的文本，我使用的react-native和native-base 。 我无法在Text组件本身中垂直和水平居中放置文本。 我分为几种颜色，以图形方式查看问题。

要素：

<View
  style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }}>
  <Text uppercase={false} style={styles.buttonTextLeft}>
    {title}
  </Text>
  <Text uppercase={false} style={styles.buttonTextLeftGreen}>
    {subTitle}
  </Text>
</View>

样式：

buttonTextLeft: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  color: '#005f99',
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'yellow'
},
buttonTextLeftGreen: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  color: '#94cf1c',
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'green'
},

您看到的是我所做的所有测试。 当然，这很愚蠢，但我尚未解决，您有什么想法吗？ 谢谢。

解

对于那些有相同问题的人，我输入正确和干净的当前情况的代码（不使用backgroundColor）：

JS

<View
  style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }}
>
  <Text uppercase={false} style={styles.buttonTextLeft}>
    {title}
  </Text>
  <Text uppercase={false} style={styles.buttonTextLeftGreen}>
    {subTitle}
  </Text>
 </View>

样式

buttonTextLeft: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  flex: 1,
  flexDirection: 'row',
  lineHeight: normalize(20),
  paddingVertical: normalize(4),
  color: '#005f99',
},
buttonTextLeftGreen: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  flex: 1,
  flexDirection: 'row',
  lineHeight: normalize(20),
  paddingVertical: normalize(4),
  color: '#94cf1c',
},

Answer 1

也许我不是真正了解您的问题，我想您的问题在green和yellow区域内。

我遇到了同样的问题，为了处理该问题，我使用了line-height: 20和paddingVertical: 5 。 20和5数字是示例，用于我的项目设计。 您输入数字而不是数字。

Answer 2

将文本的行高设置为所需的框高应该可以。 例如，如果您希望黄色框的高度为lineHeight: 50 ，则可以在文本上设置lineHeight: 50 。

希望能有所帮助。