ReactNative Expo App Very Slow Performance

2020-06-28 02:55发布

问题:

I'm new to react-native currently developing an app All the app should contain

1- Carousel

2- 12 Category Card

3- 1 Category Page Contain Cards with Images and some texts (The card data will be fetched from an API)

I'm Using Expo App But the Performance is extremely slow in iPhone 6 For Example it's fine in iPhone 7 and above

Scrolling Performance is bad
Navigation Performance is bad

Project EXPO QR LINK: https://expo.io/@ov3rcontrol/Weddi
Github Project Link : https://github.com/Ov3rControl/Weddi (Feel Free To Pull Request and Contribute to improving its a performance ) How can I improve my React-Native App Performance? what am i doing wrong here that is causing this performance issues

**EDIT 1: i Get Warrnings 1- Overwriting fontFamily style attribute preprocessor

                    2- Each child in a list should have a unique "key" prop   

                    3- VirtualizedList: You have a large list that is slow  

to update - make sure your render item function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate**

EDIT 2 : React Dev Tools

回答1:

VirtualizedList: You have a large list that is slow Use pagination to resolve this. Limit the data array size to solve that. Flatlist renders the element on by one and if there are lot of elements then the performance would be slow. Also try using some optimisation procedures of flatlist like :

removeClippedSubviews initialNumToRender maxToRenderPerBatch windowSize and layout height and width pre calculation if those are static : https://facebook.github.io/react-native/docs/flatlist#getitemlayout

https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b