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

Question

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

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

Проблема визуализированы (пролеты желтым цветом):

(через http://codepen.io/anon/pen/GoWmdm?editors=110)

Есть ли способ, чтобы получить надлежащую упаковку и истинное инлайн моделирование с использованием гибких свойств?

Answer 1

Вы можете получить этот эффект, обернув текстовые элементы в других текстовых элементов так, как вы бы обернуть промежуток в 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> 

Номер this.

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