问题
I'm implementing a Home screen that have lots of image views. The concept is like Photoshop layers. Each layer is an image view (PNG). The screen contains 20-30 images. The assets are stored locally.
The app runs smoothly on iOS but it is extremely slow in Android. My first solution is reducing the file sizes but it doesn't help much.
Thank you for any help you can offer!
react-native versions is 0.59.10.
回答1:
use react-native-fast-image
https://github.com/DylanVann/react-native-fast-image
use webp format instead of png
put your images at android or ios app package
android/app/src/main/res/drawable
回答2:
There are a few things can do to improve your application performance.
1. Reduce image size
Use smaller sized images like a thumbnail.
Use PNG as opposed to JPG.
Convert your images to WebP format.
2. Cache the images locally
Since you are loading images from locally you don't need to focus on this.
3. Avoiding Unnecessary Renders Using PureComponent
If you are using FlatList to render images,
4. Add initialNumToRender prop on your FlatList
This defines how many items will be rendered for the first time.
5. Define the key(keyExtractor) prop on your Item Component
This will avoid re-render dynamically added or removed items.
6. Use getItemLayout to skip measurement of dynamic content.
Also, there is some prop called maxToRenderPerBatch, windowSize that you can use to increase the performance of the application.
Check React Native Flatlist & Performance official docmentations for more informations.
Also, check this article to improve the performance of FlatList.
来源：https://stackoverflow.com/questions/59691632/reactnative-android-extremely-slow-within-may-image-views