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

Question

我试图在文本环绕图像的本地反应中实现非常常见的效果.在网络上,您可以float为图像指定属性并使用p标记进行跟踪. .

这是我一直在研究的RNPlay示例.我认为我目前的方法有点hackish,并且没有正常工作,因为文本没有与图像的顶部对齐并且向下流动.有没有一个适当和干净的方法来实现这一目标？

Answer 1

您可以使用Textas 容器代替典型的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向左/向右移动。另一个位于图像下方。

Text有一个未得到充分推广的 React Native 库可能会有所帮助，它允许您根据组件的内容测量组件的宽度和高度：

https://github.com/alinz/react-native-swiss-knife/blob/master/lib/text/index.ios.js