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