A more efficient way to render animated GIFs in React Native

问题

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

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.

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

回答1:

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

• 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'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 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.

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

来源：https://stackoverflow.com/questions/48978958/a-more-efficient-way-to-render-animated-gifs-in-react-native