React-Native：在单个 View 组件中居中放置两个文本组件

Question

我正在尝试将两个单独的文本放在它们的组件中，我正在使用 ‍‍react-native 和 native-base。我无法在文本组件本身内将文本垂直和水平居中。我已经分了颜色来图形化的看问题了。

元素：

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

你看到评论的都是我做过的测试。当然，这很愚蠢，但我还没有解决，你有什么想法吗？谢谢。

SOLUTION

对于有同样问题的人，我输入我正确和干净的当前情况的代码（没有背景颜色）：

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>

Styles

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 组件中居中放置两个文本组件

React-Native: Center two text components in a single View component

text

view

reactjs

react-native

native-base