在内联图像周围包裹多行文本

Question

在react-native中，我发现主题说要<Image>内联，但是他们想要相同大小的内联图像。我正在尝试换行多行。我使用了这个代码和演示 - https://snack.expo.dev/@noitidart/wrap-multiple-lines-around-image

import React from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>
        <Image
          source={{ uri: 'https://via.placeholder.com/100' }}
          style={{
            width: 100,
            height: 100,
          }}
        />
        <Text style={{ flex: 1 }}>
          This is long text it should wrap around the image. Lorem ipsum even
          more haha that's kind of cool. Is this working? It is but it's only keeping the first line of text and then the second line and on are on top of the image.
        </Text>
      </Text>
    </View>
  );
}

然而，只有第一行尊重左侧图像的宽度。这是截图，有人知道如何使多行换行吗？

Answer 1

为了实现文本环绕图像的所需布局，

您可以使用具有适当样式的ImageBackground组件。

例如

 <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
  <ImageBackground
    source={{ uri: 'url' }}
    style={{
      width: 100,
      height: 100
    }}>
    <Text></Text>
  </ImageBackground>
  <Text style={{ flex: 1 }}>
    text content
  </Text>
</View>