React Native 动态获取网络图片的高

老新你好

于 2020-06-30 09:59:26 发布

阅读量902

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/WordGeGe/article/details/107034585

React Native 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种通过代码动态获取并设置网络图片尺寸的方法，确保图片能在不同屏幕尺寸下正确显示，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多云转晴

背景：订单需要店主拍照并上传在用户端展示，获取网络图片原有的高进行展示

直接上代码

    setImgUrlsAndHeight(imgUrls) {
        if (!imgUrls || imgUrls.length === 0) {return;}
        // 动态获取图片尺寸
        const promises = imgUrls.map((img, index) => {
            return new Promise((resolve, reject) => {
                Image.getSize(img, (width, height) => {
                    let imgScale = width / height;
                    let imgW = globalConstants.screen_width - (24/ratio_width);
                    let imgH = imgW/imgScale;
                    resolve(imgH);
                }, (error) => {
                    reject(error);
                });
            });
        });

        Promise.all(promises).then((imgHeights) => {
            this.setState({imgHeights: imgHeights});
        }, (errors) => {
            if (errors && errors.length > 0) {
                Toast.showToast('图片加载失败');
                this.setState({imgHeights: [0,0,0]});
            }
        })
    }