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

debugcn 发表于 Dev

诺巴迪

我想在他们的组件到中心两个独立的文本，我使用的是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',
},

用户10516706

也许我没有真正理解你的问题，我猜你的问题是内部green和yellow区域。

我有同样的问题，为了处理这个问题，我使用了line-height: 20和paddingVertical: 5. 在20和5数字采样和为我的项目设计。你把你的数字而不是他们。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。