正文 

当前位置： 首页 > 问答 >

如何手动在 FlatList react-native（意味着 -10 - 10 条记录）中使用 Spinner 添加加载更多记录！不是从使用服务器端

     2023-02-16     195

关键词：

【中文标题】如何手动在 FlatList react-native（意味着 -10 - 10 条记录）中使用 Spinner 添加加载更多记录！不是从使用服务器端【英文标题】：How to add load more records with Spinner in FlatList react-native (means -10 - 10 records) manually! not from using server side 【发布时间】：2018-10-13 12:34:14 【问题描述】：

您好，我正在开发基于 FlatList 的示例应用程序，这是我的代码。实际上，我显示了整个记录，例如我的帐户中有 50 条记录。但现在我正在显示全部 50 条记录。 Bur 我需要在添加 10 条记录后显示 10。但我不知道添加到 FlatList。

这是我的代码：

<FlatList
                    data=this.state.profiles
                    renderItem=( item, index ) => this.renderCard(item, index)
                    keyExtractor=item => item.id
                    ItemSeparatorComponent=() => <Divider style= marginTop: 5, marginLeft: width * 0.2 + 20  parentStyle= backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline'  />
                />


renderCard (profile, index) 
    console.log('rendercard', profile);
    //
    return (
        <View key=profile.id>
            <ProfileCard
                profile=profile
                style=styles.card
                onPress=() => this.props.screenProps.rootNavigation.navigate('Profile',  profile: this.state.profile, id: profile.id )
                // onPress=() => alert('PROFILE')
                onAddClick=() => this.setState( connectionPageVisible: true, cardProfile: profile )
                connectedIds=(this.props.screenProps && this.props.screenProps.connectedIds) || this.props.connectedIds
            />
        </View>
    );

请告诉我使用活动指示器加载更多记录。 提前致谢

【问题讨论】：

理想情况下，如果您从某个 api 获取配置文件，那么您需要为 api 添加一个限制以返回 10 个结果，以及接下来 10 个元素的 url 对象和以此类推，就像SoundCloud 所做的那样 感谢您的回复！从服务方面他们没有给出任何大小限制 【参考方案1】：

如果我正确理解了您的问题，那么您正在Flatlist 中寻找infinite scrolling。您可以借助 onEndReached 和 onEndThreshold 属性来实现这一点。

考虑以下原型

假设您将记录存储到this.state.profiles。

从服务器拉取新记录

在构造函数中设置初始页码

constructor(props)
   super(props);
   this.state =  page: 0

获取新记录

fetchRecords = (page) => 
    // following API will changed based on your requirement
    fetch(`$API/$page/...`)
    .then(res => res.json())
    .then(response => 
       this.setState(
           profiles: [...this.state.profiles, ...response.data] // assuming response.data is an array and holds new records
       );
    );

处理滚动

onScrollHandler = () => 
     this.setState(
        page: this.state.page + 1
     , () => 
        this.fetchRecords(this.state.page);
     );

渲染函数

render() 
    return(
        ...
        <FlatList
           data=this.state.profiles
           renderItem=( item, index ) => this.renderCard(item, index)
           keyExtractor=item => item.id
           ItemSeparatorComponent=() => <Divider style= marginTop: 5, marginLeft: width * 0.2 + 20  parentStyle= backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline'  />
           onEndReached=this.onScrollHandler
           onEndThreshold=0
        />
        ...
    );

本地更新

如果您已经提取了所有数据，但想一次只显示10，那么您只需更改fetchRecords

fetchRecords = (page) => 
  // assuming this.state.records hold all the records
  const newRecords = []
  for(var i = page * 10, il = i + 10; i < il && i < this.state.records.length; i++)
      newRecords.push(this.state.records[i]);
  
  this.setState(
    profiles: [...this.state.profiles, ...newRecords]
  );

上述方法将在提取记录时显示Activity Indicator。

希望这会有所帮助！

【讨论】：

感谢您的回复。但我从 api 获取所有记录。在我的 api 中我没有任何页面大小属性或关键字 好的，为此我提供了Local updates，假设首先提取所有数据，然后当用户到达列表末尾时，它将从本地状态填充数据.看看Local updates 部分。 顺便说一句，page 是在本地维护的，仅表示钉合。我只是想让它可扩展，这样如果 API 有任何变化，你需要做的就是更改 fetchRecords 方法。 我的意思是，现在您正在从本地填充数据，如果将来从后端填充数据有任何变化，那么您只需要更改 fetch 方法。我认为Local updates 部分应该可以解决您的问题。 但是我的api没有size选项

如何在反应原生中改变 <​​FlatList/> 的高度？

】如何在反应原生中改变<​​FlatList/>的高度？【英文标题】：Howtochangeheightof<FlatList/>inreactnative?【发布时间】：2018-05-1123:45:36【问题描述】：我想改变&lt;FlatList/&gt;的宽度和高度。我将height样式设置为当前的&lt... 查看详情

如何在 React Native 中包装 Flatlist 项目

】如何在ReactNative中包装Flatlist项目【英文标题】：HowtoWrapFlatlistitemsinReactNative【发布时间】：2019-01-2001:10:37【问题描述】：我正在尝试呈现此图像中的项目列表。每行中的项目将根据其文本大小而有所不同。Flatlist用于渲染项目... 查看详情

如何在本机反应中创建两列之间有空格 - flatList

】如何在本机反应中创建两列之间有空格-flatList【英文标题】：Howtocreatetwocolumnswithspacebeetweninreactnative-flatList【发布时间】：2017-09-0618:44:19【问题描述】：您好，我是ReactNative的新手。我正在尝试使用名为flatList的react本机组件创... 查看详情

FlatList - 如何自动到顶部

】FlatList-如何自动到顶部【英文标题】：FlatList-Howtogoautomaticallytothetop【发布时间】：2021-09-1121:23:23【问题描述】：我正在使用ReactNative(Expo)。我能做什么：每当一个用户在屏幕中输入相应的平面列表时，都会自动转到该列表的顶... 查看详情

如何在反应原生中过滤FlatList中的项目

】如何在反应原生中过滤FlatList中的项目【英文标题】：HowtofilteritemsinFlatListinreactnative【发布时间】：2022-01-0219:57:12【问题描述】：我正在进行api调用并将响应存储在一个状态中：varapi_response=resp.docssetShift(api_response);api响应："doc... 查看详情

Flatlist onEndReached 无限循环

】FlatlistonEndReached无限循环【英文标题】：FlatlistonEndReachedendlessloop【发布时间】：2018-10-2623:29:54【问题描述】：我正在使用state来存储以下数据。state=refresh:true,isFetching:true,showLoadingBottom:false,data:[];在componentDidMount上，我手动调用... 查看详情

如何在本机反应中设置 FlatList 的刷新指示器？

】如何在本机反应中设置FlatList的刷新指示器？【英文标题】：HowtosetRefreshIndicatorofFlatListinreactnative?【发布时间】：2018-01-2109:53:39【问题描述】：我正在尝试在reactnative中设置平面列表的刷新指示器，但不知道该怎么做。列表视... 查看详情

反应本机打字稿如何键入 FlatList

】反应本机打字稿如何键入FlatList【英文标题】：ReactnativetypescripthowtotypeFlatList【发布时间】：2021-10-0414:23:23【问题描述】：我找不到在reactnative中键入FlatList的方法exportinterfaceCategoryid:string;title:string;bg:string;exportconstCATEGORIES:Categor... 查看详情

如何在排毒测试代码中选择位于另一个视图（视图上的按钮）但可见的视图（FlatList）？

...中选择位于另一个视图（视图上的按钮）但可见的视图（FlatList）？【英文标题】：HowtoselectaView(FlatList)indetoxtestcodewhichisbehindanotherView(ButtononView)butvisible?【发布时间】：2019-01-1101:41:57【问题描述】：在单个屏幕上有一个可滚动的F... 查看详情

如何将道具从 FlatList 项目传递给 Modal？

】如何将道具从FlatList项目传递给Modal？【英文标题】：HowtopasspropsfromFlatListitemtoModal?【发布时间】：2018-03-1108:06:19【问题描述】：我已经实现了一个包含FlatList的View组件，它呈现TouchableHighlights。我还实现了一个Modal组件，我想在... 查看详情

如何单击 Flatlist 中的项目以显示另一个组件而不在抽屉中显示它

】如何单击Flatlist中的项目以显示另一个组件而不在抽屉中显示它【英文标题】：HowtoClickoniteminFlatlisttodisplayanothercomponentwithoutdisplayingitinthedrawer【发布时间】：2021-12-2621:09:43【问题描述】：我在抽屉里有2个屏幕，其中一个包括Fla... 查看详情

React Native：如何正确地将 renderItem 项传递给 FlatList，以便它们可以在另一个组件中呈现？

】ReactNative：如何正确地将renderItem项传递给FlatList，以便它们可以在另一个组件中呈现？【英文标题】：ReactNative:howtoproperlypassrenderItemitemstoFlatList,sotheycanberenderedinanothercomponent?【发布时间】：2021-07-1518:18:57【问题描述】：为了测... 查看详情

Flatlist getItemLayout 用例

】FlatlistgetItemLayout用例【英文标题】：FlatlistgetItemLayoutusecase【发布时间】：2018-07-1815:44:55【问题描述】：为什么我们在flatlist中使用getItemLayout，它如何帮助提高flatlist的性能。检查react-native文档但没有找到令人满意的答案。getIte... 查看详情

reactnative如何解决encountedtwochildrenwiththesamekey,"::"....

参考技术A最近在开发ReactNative时使用FlatList构建列表，遇到一个报警如下：因为FlatList要求每一个FlatList的items有一个唯一的key。解决方法是在FlatList使用 keyExtractor。ReactNative中文网提供了一个方法在FlatList的keyExtrator属性中使... 查看详情

我编写了用于在反应中列出书籍的代码，但 FlatList 在我的代码中不起作用，我该如何解决？

】我编写了用于在反应中列出书籍的代码，但FlatList在我的代码中不起作用，我该如何解决？【英文标题】：IwritecodeforlistingbooksinreactbutFlatListdon\'tworkinmycode,howcanisolveit?【发布时间】：2021-10-0518:31:34【问题描述】：我编写了以下... 查看详情

如何反应原生重新渲染 Flatlist？

】如何反应原生重新渲染Flatlist？【英文标题】：Howtodoreactnativere-renderFlatlist?【发布时间】：2021-12-2801:51:03【问题描述】：如何做reactnative重新渲染Flatlist？使用Effect检查tagId的数据并弹出一个新页面，直到tagId存在。使用useEffect... 查看详情

React Native - 如何从父级获取 FlatList 项的值

】ReactNative-如何从父级获取FlatList项的值【英文标题】：ReactNative-HowtogetthevaluesofFlatListItemsfromParent【发布时间】：2021-04-1614:33:16【问题描述】：我正在使用已呈现项目的平面列表。平面列表中的每个项目都是一个自定义组件，具... 查看详情

如何更新 FlatList 项目的属性？

】如何更新FlatList项目的属性？【英文标题】：HowtoupdatetheattributeofanitemofaFlatList?【发布时间】：2020-02-2205:55:52【问题描述】：我编写了一个由TextInput、Button和FlatList组成的Android应用程序。使用TextInput中写入的每个名称，平面列表... 查看详情