[Preload，cache gif图片，以避免在React Native中闪烁

Question

我正在尝试在React Native中创建动画，其中角色会做一些俯卧撑。我想在此时完成上下移动。

所以我将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>
    )
}

Answer 1

您可以使用Image.getSize API。

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