小编Kei*_*rak的帖子

我试图在React Native中实现以下效果:

图像角落有一个按钮.无论图像的大小或纵横比如何,按钮始终位于图像的角落内,并且图像的任何部分都不会被剪裁(它总是按比例缩小以完全适合框内).

我在React Native中遇到的麻烦是Image组件的大小并不总是与图像的缩小尺寸相匹配.如果我将图像的高度固定为300,则设置flex 1以使图像的宽度扩展以填充其内容,并且图像为纵向,Image组件具有容器的整个宽度,但组件中的图像将具有宽度要少得多.因此,使视图覆盖另一个视图的典型方法不能像我希望的那样工作 - 我的覆盖也覆盖图像周围的填充,并且按钮(锚定到角落)出现在图像外部.

这是它在React Native中的样子:

X是按钮的占位符.它被设置为锚定到视图的左上角,该视图是图像所属的相同视图的子视图.图像的backgroundColor设置为绿色,以演示Image组件的宽度与组件内部图片的宽度之间的差异.

目标是无论其纵横比如何,X都将位于图像内部.我想我可以做一些基于抓取图像的尺寸和缩放图像组件的高度和宽度,但这听起来复杂和脆弱.这是否可以通过样式以响应方式实现？

演示代码:

__CODE__