预加载、缓存 gif 图像以避免在 React Native 中闪烁

Posted 2023-03-28

【中文标题】预加载、缓存 gif 图像以避免在 React Native 中闪烁

【英文标题】：Preload, cache gif Images to avoid flickering in React Native

【发布时间】：2020-06-22 22:36:07

【问题描述】：

我正在尝试在本机反应中创建一个动画，其中一个角色会做一些俯卧撑。 上上下下在我想要的那一刻完成。

所以我将一个 gif 动画分成 2 个 gif，没有重复。一个让他上去，一个让他下楼。 这些图像在本地存储

问题是gif变化的时候有闪烁。

我试过react-fast-image，但是gif动画太慢，gif会自动循环播放。 我试图将过渡图像放在正在切换的肉类图像中，但仍然是闪烁行为。 图片 onLoadEnd 回调似乎调用得太早了，在图片实际结束加载之前。

我如何切换图像

if (up.includes(this.props.timer))
                this.setState( currentGif: upGif, cacheImage: downPng )
if (down.includes(this.props.timer))
          this.setState( currentGif: downGif, cacheImage: upPng ) 

这是渲染：

render() 
    return (
        <View
            style= position: 'absolute', bottom: 70 
        >
            <Image 
                source=this.state.cacheImage
                style= width: 400, height: 330, position: 'relative', bottom: 70 
                fadeDuration=0
            />
            <Image
                source=this.state.currentGif
                style= width: 400, height: 330, position: 'absolute', bottom: 70 
                fadeDuration=0
                onLoadEnd=() => this.setState(cacheImage: null)  // the Image should be loaded so I can hide the cache Image, but it desapear before the gif is loaded
            />
        </View>
    )

【参考方案1】：

您可以使用Image.getSize API。

为了获取大小，RN 下载并缓存图像。文档中说明此方法可用于预加载图像。他们还提到将来会提供更明确的 API，因此您可以暂时使用它，并在可用时切换到更好的 API。

【讨论】：

感谢您的快速答复。抱歉，我没有准确说明我使用的是本地 gif 图像。