时间戳

首页 > 解决方案 > 调整大小后获取实际图像大小 React Native

reactjs - 调整大小后获取实际图像大小 React Native

问题描述

我正在从尺寸未知的 API 中获取图像。

我希望能够在调整大小过程后知道图像的实际大小。

            <Image 
            style={{ resizeMode: Image.resizeMode.contain}}
            source={{uri:'https://blabla.com/img.jpg'}} 
            />

Image.resizeMode.contain是对图像进行统一缩放，使图像的两个尺寸（宽度和高度）都等于或小于视图的相应尺寸。

标签： reactjsreact-native

解决方案

您可以使用onLayout

<Image 
    style={{ resizeMode: Image.resizeMode.contain}}
    source={{ uri:'https://blabla.com/img.jpg' }} 
    onLayout={(event) => {
        const { width, height } = event.nativeEvent.layout;
        console.log(`Image size: ${width}x${height}`);
    }} 
/>

推荐阅读