Автоматическая ширина записи по запросу внутри текста

Как я знаю, native-таблица с реакцией не поддерживает свойство min-width/max-width.

У меня есть вид и текст внутри. Вид в автоматической ширине не изменяет размер по наследованию текстового элемента.

Как исправить эту проблему и сделать ширину представления автоматически заданной с использованием ширины текста?

Мой код:

 <View style={{backgroundColor: '#000000'}}>
      <Text style={{color: '#ffffff'}}>Sample text here</Text>
 </View>

В общем HTML/CSS я бы так понял:

 <div style="background-color: #000; display: inline;">Sample text here</div>

Примечание: flex: 1 на родительском представлении не помогает мне. Текст отображается как

"Sam"
"ple"
"Tex"
"t"

Ответы

Ответ 1

"alignSelf" делает то же самое, что "display: inline-block" будет иметь общий HTML/CSS, и он отлично работает для меня.

<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
 <Text style={{color: '#ffffff'}}>
  Sample text here
 </Text>
</View>

Ответ 2

Вы должны попробовать с flex: 1, который позволит использовать поведение flexbox:

<View style={{backgroundColor: '#000000', flex: 1}}>
    <Text style={{color: '#ffffff'}}>Sample text here</Text>
</View>

Ответ 3

Попробуйте этот способ для вашего требования:

Здесь мой рост постоянен, и я увеличиваю ширину на длину текста.

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 30, width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

Для высоты и ширины попробуйте изменить высоту внутри стиля просмотра на "автоматический" полный код ниже:

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 'auto', width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

Также попробуйте добавить отступы к представлению, чтобы правильно расположить текст.

Ответ 4

Это работает с ответом Николаса, если вы не хотите центрировать вид где-либо. В этом случае вы можете добавить представление обёртки вокруг представления, чтобы получить ширину его содержимого, и установить alignItems: 'center'. Как это:

    <View style={{ flex: 1, alignItems: 'center' }}>
        <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
            <Text>{'Your text is here'}</Text>
        </View>
    </View>

Цвет фона добавлен, чтобы показать размер внутреннего вида