Как плавать текст вокруг изображения в

Я пытаюсь добиться очень общего эффекта в реакции, связанной с переносом текста вокруг изображения. В Интернете вы должны назначить свойство float для изображения и следовать ему с тегом p.

Вот как я хочу, чтобы мои элементы текли

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

Ответы

Ответ 1

К сожалению, до сих пор нет простого способа сделать это, даже после введения вложенных View внутри Text. Удивительно, но в сообществе iOS это кажется нетривиальным.

iphone - Как реализовать эффект "float" для изображения, как в стиле CSS https://github.com/Cocoanetics/DTCoreText/issues/438

Одна идея, которая пришла бы в голову, что стоит потрудиться, - это измерение текста, размеров и/или символа, и в зависимости от размера изображения разделите текст на два компонента Text, один из которых идет справа/слева, а другой - ниже изображения.

Существует эта уязвимая библиотека React Native, которая может помочь, которая позволяет измерять ширину и высоту компонента Text на основе его содержимого:

https://github.com/alinz/react-native-swiss-knife/blob/master/lib/text/index.ios.js

Ответ 2

Вы можете использовать Text в качестве контейнера вместо типичного View.

<Text style={{flex: 1}}>
  <Image source={Images.IconExplore} style={{ width: 16, height: 16 }} />
  <Text> Your past has been in control for far too long. It time to shift to a higher expression of what you are capable of so you can create the life you want to live.</Text>
</Text>

Ответ 3

Теперь вы можете использовать

flexDirection: 'row'