如何在图像中浮动文本以反应原生

Question

我正在尝试在文本环绕图像的反应中实现非常常见的效果。在网络上，您可以为图片指定float属性，然后使用p标记进行操作。 。

这是我一直在努力的RNPlay example。我认为我目前使用的方法有点hackish，并且没有正常工作，因为文本没有与图像的顶部对齐并且向下流动。是否有适当而干净的方法来实现这一目标？

Answer 1

不幸的是，即使在View内引入嵌套Text之后，仍然没有简单的方法可以做到这一点。令人惊讶的是，在iOS社区中，这似乎并非无足轻重。

iphone - How to implement the effect of "float" for image, just like in CSS style 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 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'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 3

现在你可以使用

flexDirection: 'row'