在 React Native 中渲染动画 GIF 的更有效方法 [英] A more efficient way to render animated GIFs in React Native

问题描述

我正在开发一个可处理大量动画 GIF 的 React Native 应用.

I'm working on a react native app which works with a lot of animated GIFs.

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

I've tried using the react native documented library com.facebook.fresco:animated-gif:1.3.0 for animated gif support, yet, the performance of the default Image component is terrible, but using FastImage package I am able to get, at maximum, 10 gifs.

由于有可能在 React Native 中集成原生库，我想知道有什么办法可以解决这个问题?

As there is the possibility of integrating the native libraries in React Native, I was wondering what could a solution to this problem?

推荐答案

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

I've tested a couple ways to increase the performance of loading multiple animated GIFs in React Native:

• 动画图片更好的格式是 webp(为什么?).压缩后，无论是在您的网络应用还是移动应用中，其加载的轻量级都可以提高约 90%.

• The better format for animated pictures is webp (Why?). Once compressed, it can be around 90% more lightweight to be loaded whether in your web app or your mobile app.

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

Facebook's Fresco library which is the documented recommended library for rendering gifs and webp files should be upgraded as it provides a better performance for multiple gif loading, and also the original fresco library should be added as a dependency - at the moment, to at least, 1.5.0 or higher, if possible w/ react-native:0.54 -.

FlatList 可以使用 removeClippedSubviews 道具进行优化，以删除屏幕上没有的任何内容.或者，也有第三方库，例如 recyclerlistview 或延迟加载列表.

FlatList can be optimized to remove anything that is not on the screen using removeClippedSubviews prop. Alternatively, there are third-party libraries such as recyclerlistview or lazy loading lists out there.

在某些情况下，使用 fast-image 进行缓存也很有优势.

Using fast-image for caching can also be advantageous in some cases.

这篇关于在 React Native 中渲染动画 GIF 的更有效方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！