在 React Native 中渲染动画 GIF 的更有效方法

Question

我正在开发一个可与许多动画 GIF 配合使用的本机应用程序。

我已经尝试使用 react native 文档库com.facebook.fresco:animated-gif:1.3.0来支持动画 gif，然而，默认 Image 组件的性能很糟糕，但是使用FastImage包我能够得到，最多 10 个 gif。

由于有可能在 React Native 中集成本机库，我想知道这个问题有什么解决方案？

Answer 1

我测试了几种方法来提高在 React Native 中加载多个动画 GIF 的性能：

• 动画图片更好的格式是 webp（为什么？）。压缩后，无论是在您的网络应用程序还是您的移动应用程序中，它都可以轻量级加载约 90%。

• Facebook 的 Fresco 库是文档中推荐的用于渲染 gif 和 webp 文件的库，应该升级，因为它为多个 gif 加载提供了更好的性能，并且应该将原始 fresco 库添加为依赖项 - 目前，至少， 1.5.0 或更高版本，如果可能的话，使用 react-native:0.54 -。

• 可以优化 FlatList 以使用removeClippedSubviewsprop删除屏幕上没有的任何内容。或者，那里有第三方库，例如recyclerlistview或 延迟加载列表。

• 使用fast-image缓存还可以在某些情况下是有利的。