ReactNative平面列表onEndReached不工作
React Native是一种跨平台的移动应用开发框架，可以使用JavaScript来构建原生移动应用。在React Native中，平面列表（FlatList）是一个用于展示大量数据的组件，它可以实现无限滚动加载数据的功能。onEndReached是FlatList提供的一个属性，用于指定在列表滚动到底部时触发的回调函数。
然而，有时候我们会遇到onEndReached不工作的情况。可能的原因有：
- 数据未正确绑定：确保数据正确地绑定到FlatList组件的data属性上，并且正确地传递给renderItem函数。如果数据未正确绑定，列表将无法正确计算滚动到底部的条件。
- onEndReachedThreshold值设置不正确：onEndReachedThreshold是一个数值属性，用于指定列表滚动到底部之前触发onEndReached回调的阈值。默认值为0.1，即当列表滚动到距离底部还剩下10%的时候触发。如果设置不正确，比如设置为1，则可能会导致onEndReached无法触发。可以尝试调整该值来触发onEndReached回调。
- 列表的高度未设置：如果FlatList的容器没有设置固定的高度或使用了flex样式，可能会导致列表无法正确计算滚动到底部的条件。确保给FlatList组件设置一个明确的高度，或者在父容器中设置合适的flex样式。
- 数据源为空或加载速度过快：如果数据源为空，或者数据加载速度过快，可能会导致列表一开始就滚动到底部，从而无法触发onEndReached回调。可以通过在onEndReached回调中加入逻辑判断，例如判断当前是否已经加载完所有数据，以避免无用的回调。
针对React Native平面列表onEndReached不工作的问题，可以参考腾讯云提供的云开发文档，其中包括了React Native相关的开发指南和示例代码，以帮助开发者更好地使用React Native开发移动应用。
腾讯云云开发文档：https://cloud.tencent.com/document/product/876
相关·内容
我是ReactNative开发的新手，我正在开发我的第一个应用程序。我正尝试在滚动视图选项卡中的平面列表中使用OnEndReached。我使用这个滚动视图是因为我的应用程序中有3个平面列表。 前两个是水平的。对于最后一个，我需要使用onEndReached处理分页。但是，当我把最后一个平面列表放在滚动视图中时，它根本不能工作，没有任何问题。 当我将它放到滚动视图之外时，它可以正常工作。所以我假设这个问题与此相关。 你知道我该如何处理这个问题吗？如果这是一个基本的问题，我很抱歉：
浏览 19提问于2020-10-15得票数 0
回答已采纳
我正在使用react-native FlatList组件对项目列表进行分页，因为根据文档，当到达页面末尾时，onEndReached必须被触发，目前我尝试更改onEndReachedThreshold的值(尝试0.1，1.0，0.5，0.01 )，我还设置了刷新标志。注意:我使用的是ReactNative 0.48.4，所以这里是我的代码 <Container style={{ marginTop: 22 }}>
<Content
style={{ flex: 1 }}
contentContainerStyle={{ flexG
浏览 65提问于2018-02-12得票数 8
回答已采纳
代码如下：
<ScrollView>
{ tree.myPoiComments.CommentInfo && tree.myPoiComments.CommentInfo.length>0 &&
<FlatList
data={tree.myPoiComments.CommentInfo}
keyExtractor = {(item, index) => item.CommentId}
ListHeaderComponen
浏览 5提问于2018-02-23得票数 5
1回答
我知道如何使用onRefresh工具从列表的顶部实现“拉到刷新”，是否有方法对列表的底部执行类似的操作，所以当我从底部“拉”时会触发一个函数吗？
onEndReached道具并不像我想的那样工作，因为每次你到达列表的末尾，它都运行一个函数，我不想那样，除非我从底部“拉”，否则我什么都不想运行。
我试着用invert道具倒置平面图，这是在从底部(倒挂)时使用onRefresh道具的，它工作得很完美，但我希望两者都能使用。
有什么想法吗？
浏览 5提问于2022-04-11得票数 0
回答已采纳
我正在寻找关于如何在使用apollo钩子时最好地在flatlist提供的onEndReached回调中实现loadMore函数的见解！我已经让它在某种程度上工作了，除了每次我加载更多的结果时，列表会跳到顶部，因为扁平列表的数据字段依赖于来自useQuery的传入数据，而每次它要求更多结果时，这些数据都会改变……我不知道我是否应该实现基于偏移和限制的分页，基于指针的分页，还是其他策略。如果任何人有小贴士，那将是巨大的！谢谢!
浏览 10提问于2021-05-19得票数 0
如果我将平面列表括在一个视图中，那么如果我删除包围视图的onEndReached，那么我的onEndReached就会无限触发。
render() {
return (
<Root>
<Container>
<Content>
<View>
{this.state.listView && (
<Flat
浏览 7提问于2017-09-22得票数 9
回答已采纳
所以我有一个FlatList，它得到一个项目数组。当我滚动到底部时，我会将更多的项附加到数组的末尾，并显示给用户。
问题是，当我们添加到项数组时，每个单独的is项都会呈现，有时甚至呈现两次。
代码在这里简化了。/r/reactnative无法回答这个问题。
constructor(props) {
super(props);
this.state = {itemsTest: ['A', 'A', 'A', 'A']}
}
render() {
// Key is fine, since none of my items ar
浏览 1提问于2020-08-26得票数 2
回答已采纳
我有一个FlatList，如下所示：
<FlatList
inverted
data={messages}
keyExtractor={this._keyExtractor}
renderItem={({ item }) => (
<Text style={styles.item}>{item}</Text>
)}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={30}
/>
但在这里，当我到达扁平列表的顶部时，
浏览 1提问于2018-04-29得票数 1
我有一个显示posts提要的数据列表，每当用户滚动时，该列表会自动向上或向下滚动多次，这会导致非常糟糕的UX。
尝试了这里提供的解决方法：，但它似乎不适合我。
<FlatList
keyboardDismissMode = 'on-drag'
keyboardShouldPersistTaps = 'always'
getItemLayout={(data, index) => (
浏览 0提问于2019-05-13得票数 1
我的容器是一个滚动视图，里面是一个扁平列表，它从服务器加载数据。
扁平表：
<VirtualizedList
ListEmptyComponent={<NoData />}
data={data}
getItem={(items, index) => items.get(index)}
getItemCount={(items) => items.size}
keyExtractor={(item, index) => String(index)}
renderItem={this._renderItem}
refreshCont
浏览 4提问于2018-07-13得票数 5
1回答
我正在工作的扁平表有一个复杂的孩子，导致昂贵的再渲染，我需要优化，但我不能停止与useMemo的重新渲染，请帮助我通过这个。 下面是我的列表代码： <FlatList
data={thePosts}
extraData={thePosts}
keyExtractor={(item, index) => index.toString()}
removeClippedSubviews={true}
maxToRenderPerBatch={5}
浏览 8提问于2020-12-17得票数 0
2回答
我正在使用PureComponent渲染我的FlatList的项目，当我使用FlatList并在数据中传递一个本地状态给它时，渲染工作得很好，我没有浪费的重新渲染。但是，当我将FlatList与我redux存储在数据中的数组一起使用时，如果我向下滚动，那么每次调用onReachEnd时，重新呈现的效果都会很好。但是当我没有更多的数据可加载时，我会向上滚动，我所有的项目都会逐个重新呈现。
好像我的整个清单都丢了。
我在数据中使用了与本地状态完全相同的列表，而且它工作得很好！仅当我尝试使FlatList和Redux协同工作时才出现该问题
<FlatList
ref={(view) =&
浏览 5提问于2019-08-13得票数 3
我在使用react native中的列表视图onEndReached组件时遇到了一些问题。
呈现代码：
@autobind
_fetchMoreHistory(){
console.log("Fetch more history called");
}
<View style={[styles.Ctr]}>
<ListView dataSource={this.state.txHistorySource}
renderRow={ this._renderRow }
onEndReached ={
浏览 0提问于2016-12-23得票数 6
5回答
我有很多麻烦，滚动到我的弗拉特列表顶部，所以任何帮助都会非常感谢！
本质上，它从firebase获取前5项，然后当调用onEndReached时，我们将下面的5项追加到列表中：
data: [...this.state.data, ...results]
现在，我的视图顶部有一个刷新按钮，执行以下操作：
this.flatListRef.scrollToOffset({ animated: true, y: 0 });
如果在呈现前5项时单击此按钮，则按预期将其滚动到列表的顶部。该问题仅在列表被附加后才会发生(我猜这些项目已关闭视图？)。
我也尝试过“ScrollToItem”，但是我猜想这是
浏览 2提问于2018-05-20得票数 48
回答已采纳
安装NativeBase npm install native-base --save时出现此错误，但我的项目无法正常工作
npm WARN rm not removing E:\ReactNative\Project\node_modules\.bin\jest.cmd as it wasn't installed by E:\ReactNative\Project\node_modules\jest
npm WARN rm not removing E:\ReactNative\Project\node_modules\.bin\jest as it wasn't inst
浏览 5提问于2018-03-01得票数 0
1回答
我是新使用ReactNative的，我已经创建了一个包含2-3个组件的屏幕。一切正常，但后来我增加了更多的组件.我期待看到他们都只是做滚动运动，但一切都像冻结没有任何滚动。如果我将屏幕包装成一个<ScrollView>，效果很好，但是有一个警告。
我是不是漏掉了什么？我的其他屏幕运行良好，但它们使用的是平面列表，我不想在当前的屏幕上使用它。
屏幕
<View style={{flex: 1}}>
<Image
style={styles.image}
preview={{uri: listing.images[0].thumbnailUrl
浏览 6提问于2020-07-13得票数 0
我需要创建一个水平的FlatList，比如instagram故事，并在某个时候触发onEndReached函数来知道何时从后端下载更多的项目。
浏览 13提问于2022-01-15得票数 0
我正在使用react native中的scrollview，但onendreached不起作用，我如何在水平滚动视图中使用onendreached <Animated.ScrollView
horizontal
scrollEventThrottle={1}
showsHorizontalScrollIndicator={false}
snapToInterval={CARD_WIDTH}></Animated.ScrollView> 如果我在滚动视图中使用水平，我需要水平平铺列表。那么平面列表就无法工作
浏览 19提问于2019-12-31得票数 0
我在ScrollView中有FlatList，FlatList有onEndReached方法来加载分页数据(onEndReachedThreshold设置为0.1).The问题，onEndReached方法甚至没有滚动就一直触发。 <FlatList
nestedScrollEnabled={true}
removeClippedSubviews
initialNumToRender={20}
data={listProducts.items}
keyExtractor={item => item.id}
renderItem={({ item }) =&
浏览 36提问于2019-06-18得票数 1
我正在使用
import {CollapsibleHeaderTabView} from "react-native-tab-view-collapsible-header";
import {HScrollView} from "react-native-head-tab-view";
我将FlastList推送到HScrollView中
<HScrollView
index={0}
style={{backgroundColor: "#FFFFFF"}}
浏览 68提问于2021-08-26得票数 2
我使用<FlatList>来呈现一个列表：
<FlatList
ListFooterComponent={this.renderFooter}
ItemSeparatorComponent={this.renderSeparator}
refreshing={this.state.refreshing}
onRefresh={this.doPullRefresh}
onEndReached={this.endFooter}
initialNumToRender={10}
浏览 2提问于2017-06-02得票数 0
回答已采纳
我在一个flatLists中嵌套了两个scrollView，所以我能够滚动我的整个页面。但是，我知道出于多种原因，您不应该将flatLists嵌套在scrollViews中。
如何在仍然能够滚动整个页面的同时呈现两个flatLists ?flatLists在文章底部的是我想要的行为。
我创建了一个，并在下面提供了一些示例代码。
export default function App() {
return (
<View style={{ alignItems: 'center', marginTop: 100, flex: 1}}>
&
浏览 18提问于2022-12-01得票数 1
回答已采纳
render() {
return (
<ScrollView style={styles.scroll_style}>
{this._renderStoreInfo()}
{this._renderOperatesView()}
<View style={styles.space}/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSour
浏览 1提问于2016-02-15得票数 3
这是我的组件渲染代码。
render() {
let loadMore;
let hasMore = this.props.end && this.props.photos.length < this.props.end;
if (hasMore) {
loadMore = (
<View style={globalStyles.ContChild}>
<Button
onPress={() => this.loadMoreItems()}
container
浏览 2提问于2016-06-28得票数 3
事情是这样的。我想呈现一个在onEndReached时更新数据的列表视图。
当数据更新时，我想在列表下面呈现一个“正在加载”的文本(不删除列表)。如下所示：
render() {
var {isFetching} = this.props.query
var loading
if(isFetching){
loading = this.renderLoading()
}
return (
<ListView
dataSource={this.dataSource}
renderRow={this.renderItem
浏览 6提问于2016-01-08得票数 1
我已经使用Redux实现了一个RecyclerListView()，如下所示。一切看起来都很好，除非onEndReached被调用，新的一批数据通过，列表被放置在页面的顶部，而不是保持平滑。请在下面的GIF中看到这种行为：
注:这是发生在网上(铬)。我试过最新的马厩和2.0.13-α.1
import React, { useCallback } from 'react';
import { View, Text, Dimensions } from 'react-native';
import { useSelector, useDispatch }
浏览 7提问于2020-01-03得票数 5
我在一个ListView组件中有3个ScrollView组件，如下所示：
<ScrollView>
<Header />
<ListView onEndReached={() => alert('load more 1')}/>
<ListView onEndReached={() => alert('load more 2')}/>
<ListView onEndReached={() => alert('load more 3')}/>
<
浏览 2提问于2016-08-11得票数 15
回答已采纳
我的FlatList触发器未按预期到达。onEndReached一次又一次地被调用。我读过一些关于在视图中使用flex:1包装扁平列表的建议，但是我仍然不能正常工作。此外，删除scrollView也不起作用-
这对没有帮助
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<Sea
浏览 0提问于2019-01-02得票数 1
这个问题是关于在泛化组件时的良好实践和模式。
我正在实现一个FlatList包装组件"UserList"，它呈现"UserListItem“。
我的想法是使它变得灵活，允许将诸如"keyExtractor“或"renderItem”这样的定制道具作为可选的道具。如果道具未被传递，则列表将使用自己的方法。
因此，我有以下几点：
const UserList = memo(
(props) => {
const {
data,
keyExtractor,
listKey,
L
浏览 2提问于2021-06-16得票数 2
回答已采纳
我正在学习RN，在我的项目中有一些问题。我希望在我的项目中能喜欢这个
这是我的代码：
<View style={{ height: Dimensions.get('window').height }}>
<StatusBar translucent={true} backgroundColor='#00000000' />
<View>
...... something here......
</View>
<View style={{ flex: 1}}&
浏览 2提问于2019-06-24得票数 2
3回答
既然我们可以在onEndReached中使用更多的加载功能，那么当我们到达列表的顶端时，我们如何才能使用更多的load呢？同时，当我在顶部加载更多数据时，平面列表移动到最上面的元素，因此滚动变得无限。
谢谢。
浏览 0提问于2019-02-28得票数 6
回答已采纳
ReactNative新手，我正在尝试使用带无限滚动的扁平列表。然而，问题是它似乎重新呈现了整个列表，而不是只呈现列表底部的新项目。如何修复它？
const ActsPreviewScreen = ({ navigation }) => {
const dispatch = useDispatch()
const fetchActsPreview = () => dispatch(getActsPreview(page))
const [page, setPage] = useState(1)
useEffect(() => {
console.
浏览 0提问于2021-10-14得票数 0
在我的ReactNative应用程序中，我使用"SafeAreaView“将我的内容限制在可见区域。我的应用程序在横向模式下运行。看这张图
我的应用程序有2个渲染项目的FlatList。如果你注意到FlatList (绿色)，在左边它有20个像素的填充，在右边，它有缺口(尽管它有20个像素的边界填充)。由于在右边的凹口，我的FlatList似乎没有居中。
有没有一种方法来处理内容大小，考虑到缺口面积？
浏览 7提问于2020-06-21得票数 5
我的ListView容器的高度是100%，即使它们在列表中的内容较少。
我的代码:
<View style={{ flex: 1, width: '95%', flexDirection: 'row', justifyContent: 'center', alignSelf: 'center' }}>
<Card style={{ width: '95%', alignSelf: 'center', marginTop: 10 }}>
<ListVi
浏览 1提问于2017-09-28得票数 0
1回答
我正在使用，并且我试图在我的Listview上使用一个无限滚动(load more)，如果第一个fetch可以填充整个屏幕高度的列表，因为onEndReached被触发了，但是当没有几个元素并且列表视图在屏幕上完全没有填充时，onEndReached不会被触发，所以它不会下载和填充下一个记录。有人能帮我处理这种情况吗？提前谢谢。
return (
<View style={{flex:1}}>
<ListView
dataSource={this.state.userDataSource}
浏览 0提问于2018-04-20得票数 0
回答已采纳
当我加载我的组件时，onEndReached会在我滚动<SectionList />之前触发一次，但当我滚动到底部时，onEndReached不会再被触发。 下面是我的代码： render (
return (
<View style={{ flex: 1 }}>
<SectionList
style={{ backgroundColor: 'pink' }}
refreshControl={
<RefreshControl
refreshi
浏览 44提问于2020-10-24得票数 1
回答已采纳
1回答
我正在使用世博会开发反应-本机应用程序。我想做一个无限列表，但是每次onEndReached事件被触发时，FlatList是刷新的自动滚动到页面的顶部！
import React, { useState, useEffect } from "react";
import { SafeAreaView, Text, FlatList } from "react-native";
export default function App() {
const [config, setConfig] = useState({
result: [],
浏览 2提问于2020-01-16得票数 0
1回答
我正在尝试使用带有react本机的共享组件，但是下面一直有这个错误。知道为什么吗？
“_reactNative.Share.open不是一个函数。(在“_reactNative.Share.open({ url: uri })”中，“_reactNative.Share.open”未定义)
浏览 1提问于2022-06-11得票数 0
回答已采纳
我有一个从远程服务器获取数据的扁平列表，该扁平列表实现了分页和链接搜索功能。当我到达列表的末尾并加载下一个页面时，将调用OnEndReached，当我搜索整个列表并找到一个或多个符合搜索条件的记录时，也会发生同样的事情。但是，当我在列表中搜索时，从已经加载的记录中没有匹配搜索的结果，在这种情况下，根本不会调用onEndReached。我尝试了onendreachedthreshold的不同值，但没有成功。你知道为什么会发生这种事吗。谢谢
浏览 0提问于2018-07-05得票数 0
我正在构建一个聊天应用程序，使用倒置的Flatlist。当调用onEndReached时，我会将新项添加到列表的顶部，并且一切正常。
问题是，如果将项目添加到底部，它会立即滚动到列表的底部。这意味着用户必须回滚以读取刚刚添加的消息(这很糟糕)。
我试图在scrollToOffset中调用onContentSizeChange，但是这有一秒的延迟，滚动卷来回跳。
当我将项目添加到顶部和底部的时，通过在屏幕上保留相同的消息而不是显示新的消息，如何使列表以相同的方式表现为呢？
浏览 12提问于2020-05-26得票数 8
我已经尝试了从0到1的onEndReacehdthreshold，但它仍然会触发垃圾邮件，而且我只尝试了onEndReached={()=>{this.onEndReached()}它触发一次
onEndReached(){
this.GetData()
}
render(){
return(
<View>
<ScrollView ...>
<FlatList ....
....
onEndReached={ this.onEndReached() }
浏览 0提问于2019-10-06得票数 0
我的ReactNative FlatList不是通过这个简单的实现来呈现的。
<FlatList style={{flex:1, backgroundColor:'red'}}
data = {this.state.users}
keyExtractor={item => item.key.toString()}
renderItem={({item}) => {
return (
<ChatUserCard key={
浏览 3提问于2018-12-09得票数 0
我正在尝试使用FlatList在React本机中实现分页。我遵循了最佳实践，但仍然会遇到以下错误：
VirtualizedList:您有一个更新速度慢的大列表--确保您的renderItem函数呈现遵循PureComponent、shouldComponentUpdate等性能最佳实践的组件。对象{ "contentLength"：23651.732421875、"dt"：1394、"prevDt"：865 }
以下是代码：
const NewsScreen = ({ isLoading, news, fetchInitialNews, fetc
浏览 13提问于2022-01-16得票数 0
这是我的整个Navigator功能组件。我正在尝试使用Tab Navigator实现两个选项卡。一个显示密码，另一个显示外汇数据。
问题是，当我试图加载更多的数据到达平面列表的末尾时，平面列表会滚动到顶部，因为我正在进行状态更改page+1。
const Navigator = () => {
const Tab = createMaterialTopTabNavigator();
const renderItems = ({ item }) => (
<Text>{item.name}<Text>
);
const
浏览 8提问于2022-02-09得票数 0
回答已采纳
我正在构建一个使用FlatList在Reactinative中的提要。通过对服务器进行异步调用，我对每页进行分页和获取10行。
我使用onEndReached和onEndReachedThreshold调用一个函数，该函数获取下一页的数据。提要的页码和数据存储在组件状态中。
当我从服务器接收数据时，我连接到状态中的数据。平面列表数据支柱被设置为状态中的数据。
然而，当我浏览提要时，我会感觉到紧张的行为，而且提要并不是平滑的。
我使用纯组件来渲染饲料。但是，每个提要项都有一些状态，因为它们是交互式组件。
避免紧张行为的一种方法是将平面列表放入滚动视图中。它确实使饲料光滑。但是，现在的问题是，对于
浏览 1提问于2018-07-05得票数 1
1回答
我正在使用平面表来水平显示产品。当我在英语模式RTL中使用应用程序时，时间平面列表工作得很好，在切换阿拉伯语LTR后平面列表卡顿，拖动后这是再次来在那里我开始拖动平面列表项目。 <ScrollView>
<FlatList
contentContainerStyle={styles.flatlist}
data={list}
keyExtractor={(item) => `post__${item.id}`}
renderItem={this.renderItem}
showsHorizontalScrollIndicat
浏览 18提问于2020-05-02得票数 0
1回答
我尝试使用创建PokemonList，首先获取/pokemon/以获取/pokemon/{pokemonName}的列表，然后再次循环以获取我的dataSource的详细信息，因为/pokemon/只提供名称
fetchData(){
fetch(this.state.urlState)
.then(response => response.json())
.then(responseJson => {
this.setState({
urlState: responseJson.next,
tot
浏览 3提问于2019-06-18得票数 0
我想做的是：
制作一个搜索栏，并在该栏下的一个平面列表中显示结果。
我所拥有的：
我有一个SearchBar和一个FlatList，FlatList需要但是处于绝对位置，所以它覆盖了搜索栏底部的内容。
问题是：
当搜索栏处于活动状态时，FlatList会覆盖它，我无法滚动列表或选择一个项。我注意到的是，如果在单击SearchBar应该出现的位置时尝试选择项目或滚动列表，则可以选择并滚动列表。
我需要的是：
显示在FlatList下面并能够滚动它的SearchBar。我可以用top: 50来显示SearchBar下的FlatList，但它看起来不错
观察：，我不太擅长风格
import Reac
浏览 0提问于2019-02-08得票数 5
我将RN实现更新为0.39.2，并在ListView组件中获得了这种奇怪的行为。见下图：
这是我的代码：
<ListView style={{marginBottom: 50, paddingTop: 10}}
onTouchMove={(e)=>{
_listViewDirtyPressEnabled = false;
}}
onTouchEnd={(e)=>{
_listViewDirtyPressEnabled = true;
}}
refreshControl={
<RefreshControl
浏览 4提问于2017-02-02得票数 2
回答已采纳
我得到了关于VirtualizedList的错误，而我没有在我的整个应用程序中的任何地方使用它，甚至没有提到或声明它。仅当我在此平面列表中使用onScroll时出现错误。下面是我的代码，错误准确地说明了这一点:不变冲突元素类型无效:需要一个字符串(对于内置组件)，但得到的是: boolean。检查"VirtualizedList“的render方法。此外，我也不能得到最终达到正常工作，无论我怎么努力，我认为RN是错误的地狱。 <SafeAreaView style={{ flex: 1 }}>
<FlatList
styl
浏览 10提问于2020-11-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
