React-Native: центрируйте два текстовых компонента в одном компоненте View - PullRequest
Новая
       37

React-Native: центрируйте два текстовых компонента в одном компоненте View

0 голосов
/ 23 октября 2018

Я пытаюсь центрировать два отдельных текста в их компонентах, я использую 100 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',
},

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Установка высоты строки текста на желаемую высоту поля должна работать.Например, если вы хотите, чтобы желтое поле было высотой 50, вы должны установить в тексте lineHeight: 50.

Надеюсь, это поможет.

0 голосов
/ 23 октября 2018

Возможно, я не совсем понял вашу проблему, думаю, ваша проблема находится внутри green и yellow области.

У меня была такая же проблема, и для решения этой проблемы я использовал line-height: 20 и paddingVertical: 5.номера 20 и 5 являются образцами и для моего проекта.Вы ставите свои номера вместо них.

...