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

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

希望有帮助。

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

2 个答案: