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

问题描述

我正在开发一个反应本机应用程序，该应用程序可以处理许多动画GIF.

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(为什么?).压缩后，无论是在Web应用程序中还是在移动应用程序中，它的加载重量都可以提高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加载提供了更好的性能，并且还应将原始的壁画库作为依赖项添加-至少达到1.5.0或更高，如果可能的话，w/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屋！