如何在React Native中在图像周围浮动文本

问题描述:

我试图在使文本环绕图像的本机响应中实现非常普遍的效果。在网络上,您可以为图像分配 float 属性,并在其后加上 p 标签。 。

I am trying to achieve a very common effect in react native of having text wrap around an image. On the web you would assign a float property to the image and follow it with a p tag. .

这是一个 RNPlay示例一直在努力。我认为我目前使用的方法有点怪异,并且无法正常工作,因为文本与图片的顶部不对齐并且向下流动。

Here is a RNPlay example I've been working on. I think the method I currently have is a bit hackish, and doesn't properly work since the text does not align with the top of the image and flow down. Is there a proper and clean way to accomplish this?

不幸的是,仍然没有简便的方法可以做到这一点,即使在文本内嵌套嵌套 View 的介绍。令人惊讶的是,在iOS社区中,这似乎并不简单。

Unfortunately, there is still no easy way to do it, even after the introduction of nested Views inside Text. Surprisingly in the iOS community this seems to be non-trivial.


https://github.com。 com / Cocoanetics / DTCoreText / issues / 438

一个值得思考的想法是测量文本,尺寸和/或字符计数,并根据图像的大小,将文本分为两个 Text 组件,一个组件位于图像的右/左,另一个位于图像下方。

One idea that comes to mind that would be worth tinkering around with is measuring the text, dimensions and/or character count, and depending on the size of the image, divide the text into two Text components, one that goes to the right/left and the other that goes below the image.

这个未得到充分推广的React Native库可能会有所帮助,它可以让您测量 Text $ c的宽度和高度。 $ c>组件基于其内容:

There is this under-promoted React Native library that might help, which allows you to measure the width and height of a Text component based on its content:

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