Бесконечная прокрутка с использованием ScrollView - React Native

#reactjs #react-native #pagination #scrollview #lazy-loading

#reactjs #react-native #разбивка на страницы #scrollview #отложенная загрузка

Вопрос:

У меня есть список, использующий ScrollView самого react native. По сути, я создаю список динамически с помощью возврата API.

 async fetchData(userSearch) {
    const {route} = this.props;
    const {params} = route;
    const {type} = params;

    this.setState({
      loading: true,
    });

    const responseProcedures = await scheduleResource.getProcedures(userSearch);

    this.setState({
      procedures: responseProcedures.data,
      loading: false,
    });
  }



<ScrollView
  onScroll={(event) => this.shouldLoadMoreContent(event)}
>
    {procedures.map(procedure => (
      <ArrowBox key={procedure.id} onPress={() => RootNavigation.navigate('ProcedureDetails', {procedure})}>
        <Text bold style={styles.ProcedureTitle}>
          {procedure.name}
        </Text>
        {!!procedure.synonyms.length amp;amp; (
          <>
            <Text bold style={styles.ProcedureSynonymTitle}>
              Sinônimos
            </Text>
            <View style={styles.ProcedureSynonymOptionsContainer}>
              {procedure.synonyms.map(synonym => <Text style={styles.ProcedureSynonymOption} key={synonym}>{synonym}</Text>)}
            </View>
          </>
        )}
      </ArrowBox>
    ))}
</ScrollView>

Проблема в том, что я загружаю весь возврат из API, и он замедляется.

Я хотел бы знать, как динамически загружать содержимое и выполнять новые вызовы в api, когда я дойду до конца страницы. API позволяет мне устанавливать смещение и ограничение.

Может кто-нибудь привести мне какой-нибудь пример?

Спасибо!!!!!

1. если вы используете FlatList компонент из react native, у него есть методы обратного вызова, которые вы можете использовать для запуска логики при достижении конца списка, чтобы вы могли выполнять вызовы api

Ответ №1:

В основном ScrollView не предназначен для обработки динамических данных, правильный компонент, предназначенный для выполнения этой функции, называется Flatlist . Он работает почти точно так же, как ScrollView, но быстрее и будет отображать только компоненты, которые отображаются на экране.

Пожалуйста, импортируйте Flatlist из React Native следующим образом…

 //At the top of your file, please import FlatList together with all the modules that you want
import { FlatList, Text, View } from "react-native";

Затем замените весь ScrollView в вашем коде на Flatlist, подобный этому:

 <FlatList
  keyExtractor={(procedure) => procedure.id}
  data={this.state.procedures}
  renderItem={(procedure) => {
    return (
      <ArrowBox
        key={procedure.id}
        onPress={() =>
          RootNavigation.navigate("ProcedureDetails", {
          procedure })}>
            <Text bold style={styles.ProcedureTitle}>
          {procedure.name}
        </Text>
        {!!procedure.synonyms.length amp;amp; (
          <>
            <Text bold style={styles.ProcedureSynonymTitle}>
              Sinônimos
            </Text>
            <View
            style={styles.ProcedureSynonymOptionsContainer}>
              {procedure.synonyms.map((synonym) => (
                <Text
                  style={styles.ProcedureSynonymOption}
                  key={synonym}>
                  {synonym}
                </Text>
              ))}
            </View>
          </>
        )}
      </ArrowBox>
    );
  }}
></FlatList>;