如何在 React Native 中自动调整图像大小以适应'view/flex-box'容器？

Question

我想在react native中显示调整大小的图像容器中的任何大小的图像数据。我面临的问题是调整图像容器的大小。我已经测试了包含、拉伸和覆盖大小调整模式，但没有得到所需的结果。当我使用包含模式时，图像会在其周围显示额外的填充，在拉伸模式下，图像会拉伸和压缩，在覆盖模式下，图片会剪切。尝试修复react native canvas、react nativeFitToImage、react native scale image、react原生图像视图，但在图像组件中使用调整大小模式时得到了相同的结果。我想缩小容器大小等于图像大小点击它，这是我在下面给出的代码

<ViewShot
ref={viewShotRef}
style={
{flex: 1 / 1.1,}
}
options={{format: 'jpg', quality: 1.0, result: 'base64'}}>
<Image
source={{
uri:
'data:image/jpeg;base64,' +
props.background_remove.image,
}}
resizeMode="contain"
style={
{
flex: 1
}
}
/>
</ViewShot>

Answer 1

例如，我有一个字母大小的视图用图像拍摄：

<View style={{flex: 1}}>
<ViewShot
ref={viewShotRef}
options={{
format: "jpg",
width: 2550,
height: 3300,
quality: 1,
result: 'base64'
}}
style={{
width: 2550,
height: 3300,
overflow: 'hidden'
}}
>
<View style={{zIndex: 3}}>
<Image
source={{
uri:
'data:image/jpeg;base64,' +
props.background_remove.image,
}}

style={{
resizeMode: 'contain',
width: 2550,
height: 3300
}}
/>
</ViewShot>
</View>