React Native: как заставить внутренние блоки расширяться за пределы своих границ, если текст слишком большой? - PullRequest
Новая
       40

React Native: как заставить внутренние блоки расширяться за пределы своих границ, если текст слишком большой?

0 голосов
/ 16 апреля 2020

В моем приложении React Native у меня есть ряд из 7 черных ящиков. Каждый черный ящик содержит красный ящик с текстом. Я хочу, чтобы красные прямоугольники центрировались горизонтально в черных прямоугольниках и сгибались горизонтально, чтобы соответствовать тексту, при этом черные прямоугольники всегда оставались одинаковой ширины. Сейчас у меня есть следующее:

enter image description here

<View style={{flexDirection: 'row', flex: 1, justifyContent: 'center', borderWidth: 1}}>
  <View style={{borderWidth: 1, borderColor: 'red', height: '100%', flexBasis: 'auto', overflow: 'visible'}}>
    <Text style={{}}>really big text</Text>
  </View>
</View>

Есть две проблемы:

1) Текст не горизонтально по центру. Он выровнен по левому краю.

2) Красные поля, содержащие текст, не растут так, как я этого хочу, за ширину черных ящиков.

Я хочу, чтобы это выглядело примерно так это:

enter image description here

Кто-нибудь знает, как я могу подойти к этому?

...