Как мне обернуть текст вокруг представления в React Native?

#css #react-native #layout

#css #реагировать-родной #планировка #react-native #макет

Вопрос:

Я хотел бы создать компонент, который будет отображать представление с именем label в правом верхнем углу и некоторый текст вокруг него, аналогично тому, что вы получите в веб float: right -макете при <div> использовании CSS. Как метка, так и текст могут иметь разную длину. Некоторое время я пытался заставить текст, начиная со 2-й строки, переноситься и разворачиваться под меткой, но безуспешно.

Это мой код до сих пор:

 <View style={{flexDirection: 'row', borderWidth: 1}}>
  <Text
    numberOfLines={3}
    style={{flex: 1}}
  >
    lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
  </Text>
  <View>
    <Text style={{backgroundColor: 'wheat'}}>
      label 1234
    </Text>
  </View>
</View>

И результирующий рендеринг:

Это то, что я хотел бы получить вместо этого:

1. Обернутый текст вокруг представления не поддерживается из коробки в RN …

2. Можете ли вы показать image пример желаемого результата? Откуда угодно??

3. @KartikeyVaish Я только что добавил пример, созданный с помощью html / css.

4. Пожалуйста, проверьте, может быть, это полезно для вас snack.expo.io/ZHH7cvdVG

5. Я не уверен, что вы сможете это сделать из-за flexDirection: row стиля. Возможно, вы захотите попробовать сделать текст метки абсолютно позиционированным.

Ответ №1:

Самым простым, но в то же время довольно «хакерским» способом было бы использовать float: right; , как вы уже пробовали. Чтобы это сработало, для гибких стилей должно быть установлено значение «начальный» как для внешнего вида, так и для текстового компонента, следующего за плавающим представлением. Кроме того, это работает только тогда, когда плавающий элемент идет первым.

 <View style={{display: 'initial', borderWidth: 1}}>
    <View style={{float: 'right'}}>
        <Text style={{backgroundColor: 'wheat'}}>
            label 1234
        </Text>
    </View>
    <Text
        style={{display: 'initial'}}
        numberOfLines={3}
    >
        lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor ydrgsr serg er
    </Text>
</View>

Живой пример: https://snack.expo.io/iuNiJSaYW