Проблема с производительностью flatList в реакции на натив

Question

Я пробовал flatlist, но у него есть проблемы с производительностью в Android.

1. Когда я прокручиваю вниз, он загружает список. Но потом он показывает пустым при прокрутке вверх.

2. Достигнув конца экрана, он на некоторое время останавливается, а затем загружает данные. Почему внизу не отображается загрузчик (индикатор активности)? Почему onEndReached и onEndReachedThreshold не работают?

Пожалуйста, посмотрите видео здесь

https://youtu.be/5tkkEAUEAHM

Мой код:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import { List, ListItem, SearchBar } from "react-native-elements";

export default class FlatListExample extends Component
{
constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    console.log('url', url);
    this.setState({ loading: true });

    setTimeout(()=>{
      fetch(url)
        .then(res => res.json())
        .then(res => {
          this.setState({
            data:  [...this.state.data, ...res.results],
            error: res.error || null,
            loading: false,
            refreshing: false
          });
        })
        .catch(error => {
          this.setState({ error, loading: false });
        });
    },0);

  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

handleLoadMore = () =>{
  this.setState({
    page:this.state.page + 1,
  },()=>{
    this.makeRemoteRequest();
  })
}
  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItem
            roundAvatar
            title={`${item.name.first} ${item.name.last}`}
            subtitle={item.email}
            avatar={{ uri: item.picture.thumbnail }}
          />
        )}
        keyExtractor={item => item.email}
        ListFooterComponent={this.renderFooter}
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={50}
      />
    );
  }
}

AppRegistry.registerComponent('FlatListExample', () => FlatListExample);

Answer 1

Я заметил, что ты не сидишь initialNumToRender, Из документов:

initialNumToRender: номер

Сколько элементов визуализировать в исходной партии. Этого должно быть достаточно для заполнения экрана, но не намного. Обратите внимание, что эти элементы никогда не будут размонтированы как часть оконного рендеринга, чтобы улучшить воспринимаемую производительность действий прокрутки вверх.

Таким образом, вы захотите оценить, сколько ячеек вы ожидаете увидеть в любой момент времени, и установить это значение. Я бы также порекомендовал, если вы еще не обновились до последней версии, которая включает в себя различные улучшения компонента FlatList.