如何在React Native中使文本环绕图片浮动

Question

我正在尝试在React Native中实现一种非常常见的效果，即使文本环绕图像。在Web上，您可以将 float 属性分配给图像，然后跟随一个 p 标记。 。

这里是我正在使用的 RNPlay示例。我认为我目前使用的方法有点笨拙，并且不能正常工作，因为文本与图像顶部不对齐并向下流动。是否有一种适当而干净的方法来实现这一点？

- naughty boy

---

有一个已关闭的问题：https://github.com/facebook/react-native/issues/4563，你可以尝试联系它的作者。也许可以解决问题。 - Ivan Chernykh

@Cherniv 很抱歉，我无法对那个问题进行评论。那个问题是在近一年前提出的，所以我希望现在可能已经有解决方案了。 - naughty boy

哈哈哈，太棒了的画作！ - Nicky Kouffeld

还没有解决方案吗？ - Jonas Sourlier

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>

- J.C. Gras

---

我尝试过这个，但是在iOS上我无法使文本与图像顶部对齐。这是屏幕截图-https://i.imgur.com/CTsf4Sw.png和另一个-https://i.imgur.com/rPQt1vS.png -我没有在android上尝试，但我认为“verticalTextAlign”属性可以解决android中的问题。 - Noitidart

这很酷，但仅适用于图像与行高相同的情况。有关多行的任何想法吗？ https://stackoverflow.com/questions/69216957/wrapping-multiple-lines-of-text-around-inline-image - Noitidart

Answer 2

很遗憾，即使在引入嵌套的 View 在 Text 中后，仍然没有简单的方法来实现它。令人惊讶的是，在iOS社区中似乎这并不容易。

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

- rclai