反应本机平面列表数据更改渲染

Question

I have a FlatList. I applied tricks in this link https://github.com/filipemerker/flatlist-performance-tips

When user scroll the list, I'm updating data for new items. But while updating data , there is a little slowless in the list and some bugs. I used pure component as much as possible. What can i do for that. Bytheway i want to add loading(activict indicator) the end of the list. How can i do that, can you give a example or link for that.

If you help i will be happy thank you.

Answer 1

React Native Pure component implement a shouldComponentUpdate with shallow compassion. You can strictly check your props on which you want to update the data by implementing your own shouldComponentUpdate method on your Component .

shouldComponentUpdate(nextProps, nextState) {
      return this.props.name !== nextProps.name;
    }

For adding Activity Indicator use ListFooterComponent prop of FlatList. For example :

footerLoadingIndicator = () => {
return (
  <View style={styles.footerContainer}>
      <Progress.CircleSnail
          size={30}
          thickness={2.5}
          direction={'clockwise'}
          duration={400}
          color={'#22a790'}
        />
  </View>
);

I have used a third party indicator. You can replace it with AcitivityIndicator