React-Native 中 Image.prefetch 的使用方法

星_Kong

已于 2024-03-15 10:59:22 修改

阅读量628

点赞数 8

文章标签： react native react.js javascript

于 2024-03-15 10:51:36 首次发布

本文链接：https://blog.csdn.net/qq_31918161/article/details/136733344

版权

本文详细介绍了如何在ReactNative应用中使用Image.prefetch预加载图片，强调了HTTPS的必要性，以及如何处理加载失败的情况，并给出了实际的Demo代码示例。

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

说明：

其实 Image.prefetch 只是加载图片，参数是图片的地址，而且必须是https的，不然会加载失败，Image.prefetch 返回的是一个promise对象，在catch中会返回加载失败的错误信息，这个很重要，建议打印一些日志，防止图片加载失败的后续查看，以及记录加载失败的数据。then回调中没有返回值，可能会疑惑怎么获取加载完成的图片展示呢，其实这里思路是，把加载成功的图片url保存下来，然后渲染的时候用，Image 组价的 soure属性进行加载即可。

先看下展示效果：

在这里插入图片描述

Demo代码如下：

import {Animated, Image, View} from "react-native";
import Text = Animated.Text;
import {useEffect, useState} from "react";

const ImageCptDemo: React.FC = (props) => {

    const [imgUrl, setImgUrl] = useState("https://file.intelli-cloud.cn/fly-flow-note-data/images/700道面试题/01-JAVA面试核心知识点整理(时间较多的同学全面复习)/06-JAVA面试核心知识点整理(时间较多的同学全面复习).assets/运行过程.jpg")

    const [okImgList, setOkImgList] = useState([])

    // 初始化调用加载图片
    useEffect(() => {
        loadImgUrl(imgUrl)
    }, [])

    // 加载图片
    const loadImgUrl = (url) => {
        Image.prefetch(url).then(() => {
            console.log('图片加载成功')
            //加载成功的将图片存下来
            okImgList.push(url)
            setOkImgList([...okImgList])
        }).catch((err) => {
            console.log("图片加载失败",err)
        })
    }

    return (
        <View>
            <Text>Hello,图片展示</Text>

            <View>

                {
                    okImgList.map((item, idx) => {
                        return (
                            <View>
                                <Text>图{idx}</Text>
                                <Image style={{
                                    width: 500,
                                    height: 600,
                                }}
                                       source={{
                                           uri: item
                                       }}
                                >
                                </Image>
                            </View>
                        )
                    })
                }
            </View>

        </View>
    );
}

export default ImageCptDemo;

为大家推荐一个好用的笔记小程序，可以随时记录自己的奇思妙想：
在这里插入图片描述