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

【问题标题】：Preload, cache gif Images to avoid flickering in React Native预加载、缓存 gif 图像以避免在 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>
    )
}

【问题讨论】：

标签： image react-native caching preload flicker

【解决方案1】：

您可以使用Image.getSize API。

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

【讨论】：

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