如何在本机反应中使文本围绕图像浮动

Question

我正在尝试在 React Native 中实现一种非常常见的效果，即让文本环绕图像。在网络上，您可以为图像分配

float

属性，并在其后面添加

p

标签。 。

这是我一直在研究的 RNPlay 示例。我认为我目前使用的方法有点hackish，并且无法正常工作，因为文本未与图像顶部对齐并向下流动。有没有正确且干净的方法来完成此任务？

Answer 1

您可以使用

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's 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>

Answer 2

不幸的是，即使在

View

 中引入嵌套 

Text

 之后，仍然没有简单的方法可以做到这一点。令人惊讶的是，在 iOS 社区中，这似乎并不简单。

iphone - 如何实现图片“浮动”的效果，就像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

Answer 3

J.C Gras 的答案是一个很好且非常棘手的方法，但有时它对于某些字体来说没有很好地对齐，所以我决定像下面这样写：

const ImageDim = 20;
const GAP = '          '; // <=== How many which satisfy your UI
// ===> Mine was 10 presses of the blank key of the keyboard

<View style={{ position: 'relative' }}>
  <Image
    style={{ position: 'absolute', top: 0, start: 0 }}
    width={ImageDim}
    height={ImageDim}
  />
  <Text style={{ lineHeight: ImageDim }}>{GAP}{'anyTextYouWant'}</Text>
</View>

这是我的结果：