InfiniteScroll 使用 ScrollView - React Native答案

【问题标题】：InfiniteScroll using ScrollView - React NativeInfiniteScroll 使用 ScrollView - React Native
【发布时间】：2020-12-14 10:46:27
【问题描述】：

我有一个使用 react native 本身的 ScrollView 的列表。基本上，我通过 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 && (
          <>
            <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 允许我放置偏移量和限制。

谁能给我一些例子？

谢谢！！！！！！

【问题讨论】：

如果你使用 react native 中的 FlatList 组件，它有回调方法，当到达列表末尾时，你可以利用它来运行逻辑，这样你就可以进行 api 调用

标签： reactjs react-native pagination scrollview lazy-loading

【解决方案1】：

基本上，ScrollView 不是为处理动态数据而设计的，旨在执行此功能的正确组件称为 Flatlist。它的工作方式几乎与 ScrollView 完全相同，但速度更快，并且只会渲染屏幕上显示的组件。

请像这样从 React Native 导入 Flatlist...

//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 && (
          <>
            <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>;

【讨论】：