Имитировать отображение: inline in React Native

React Native не поддерживает свойство CSS display, и по умолчанию все элементы используют поведение display: flex (no inline-flex). Большинство негибких макетов можно моделировать с помощью гибких свойств, но я взволнован встроенным текстом.

В моем приложении есть контейнер, содержащий несколько слов в тексте, некоторые из которых нуждаются в форматировании. Это означает, что мне нужно использовать интервалы для выполнения форматирования. Чтобы добиться обертывания пролетов, я могу настроить контейнер на использование flex-wrap: wrap, но это позволит только обертывание в конце диапазона, а не традиционное встроенное поведение обертывания при разрыве слов.

Есть ли способ получить правильную упаковку и истинное встроенное моделирование с использованием свойств flex?

Ответы

Ответ 1

Вы можете получить этот эффект, обернув текстовые элементы в другие текстовые элементы способом, которым вы могли бы заключить span в div или другой элемент:

<View>
  <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>       
</View>

Вы также можете получить этот эффект, объявив свойство flexDirection: 'row' на родительском устройстве вместе с flexWrap: 'wrap'. Затем дети будут отображать строку:

<View style={{flexDirection:'row', flexWrap:'wrap'}}>
  <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text>
</View>

Просмотрите этот пример.

https://rnplay.org/apps/-rzWGg