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

Posted 2023-03-06

【中文标题】如何在本机反应中在图像周围浮动文本

【英文标题】：How to float text around image in react native

【发布时间】：2017-01-23 16:05:16

【问题描述】：

我正在尝试实现一个非常常见的效果，即让文本环绕图像的原生反应。在网络上，您可以为图像分配一个float 属性，并在其后面加上一个p 标记。 。

这是我一直在处理的RNPlay example。我认为我目前使用的方法有点骇人听闻，并且由于文本与图像顶部不对齐并向下流动，因此无法正常工作。是否有适当且干净的方法来完成此操作？

【问题讨论】：

有一个已关闭的issue：github.com/facebook/react-native/issues/4563，你可以尝试联系它的作者可能是

@Cherniv 不幸的是，我无法对这个问题发表评论。这个问题是大约一年前提出的，所以我希望现在也许有一个解决方案。

哈哈哈画的真棒！

还是没有解决办法？

【参考方案1】：

不幸的是，即使在Text 中引入了嵌套Views 之后，仍然没有简单的方法来做到这一点。令人惊讶的是，在 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

【参考方案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>

【讨论】：

我试过了，但是在 ios 上我无法让文本与图像顶部对齐。这是屏幕截图 - i.imgur.com/CTsf4Sw.png 和另一个 - i.imgur.com/rPQt1vS.png - 我没有在 android 中尝试，但我认为 verticalTextAlign 属性会在 android 中修复它。

这很酷，但它仅在图像高度与行高相同时才有效。关于多行的任何想法？ ***.com/questions/69216957/…