React native FlatList在'；呈现

下面是我的简单

类别列表页面的render（）函数

最近，我为我的
FlatList
视图添加了分页功能，因此当用户滚动到底部时，
onEndReached
在某个点被调用（
onEndReachedThreshold
从底部开始的值长度），它将获取下一个
categories
并连接categories道具

但我的问题是在调用render（）时调用了onEndReached，换句话说，平面列表的
onEndReached
在到达底部之前被触发

我是否为
onedreachedthreshold输入了错误的值？
您是否看到任何问题

return (
  <View style={{ flex:1 }}>
    <FlatList
      data={this.props.categories}
      renderItem={this._renderItem}
      keyExtractor={this._keyExtractor}
      numColumns={2}
      style={{flex: 1, flexDirection: 'row'}}
      contentContainerStyle={{justifyContent: 'center'}}
      refreshControl={
        <RefreshControl
          refreshing = {this.state.refreshing}
          onRefresh = {()=>this._onRefresh()}
        />
      }
      // curent value for debug is 0.5
      onEndReachedThreshold={0.5} // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700

      onEndReached = {({distanceFromEnd})=>{ // problem
        console.log(distanceFromEnd) // 607, 878 
        console.log('reached'); // once, and if I scroll about 14% of the screen, 
                             //it prints reached AGAIN. 
        this._onEndReachedThreshold()
      }}
    />
  </View>
)

尝试在<代码>平面列表<代码>上执行<代码>滚动开始<代码>：

constructor(props) {
    super(props);
    this.onEndReachedCalledDuringMomentum = true;
}


也许在执行异步调用之前，您可以通过增加页面来绕过这个平面列表错误，然后您将在每个ONEDRACHED FIER上获取数据，而不会得到关于重复键的错误我使用lodash中的debounce解决了这个问题。首先，我从lodash.debounce中导入debounce。然后，我使用去Bounce以500毫秒的间隔加载更多函数

首先检查平面列表是否位于本机base的
滚动视图
或
内容
中。那就把它放在外面
实际上，您不需要使用
内容
或
滚动视图
，因为FlatList既有
ListFooterComponent
又有
ListHeaderComponent

虽然不推荐使用，但如果您确实需要在ScrollView中使用Flatlist，请查看以下答案：
删除Flatlist中的每个可滚动的视图
在尝试了几个小时的不同方法后，我通过使用固定高度的视图和flex:1包装Flatlist来实现。
有了这些设置，我可以在靠近底部滚动后调用一次OnedCached。以下是我的代码示例：

render() {
    const {height} = Dimensions.get('window');
    return (    
        <View style={{flex:1, height:height}}>
            <FlatList
                data={this.props.trips_uniques}
                refreshing={this.props.tripsLoading}
                onRefresh={()=> this.props.getTripsWatcher()}
                onEndReached={()=>this.props.getMoreTripsWatcher()}
                onEndReachedThreshold={0.5}
                renderItem={({item}) => (
                <View style={Style.card}> 
                    ...
                    ...
                </View>
                )}
                keyExtractor={item => item.trip_id}
            />
        </View>
    )
}

render（）{
const{height}=Dimensions.get（'window'）；
报税表（
this.props.getTripsWatcher（）}
onEndReached={（）=>this.props.getMoreTripsWatcher（）}
onEndReachedThreshold={0.5}
renderItem={（{item}）=>(
...
...
)}
keyExtractor={item=>item.trip\u id}
/>
)
}

我的onEndReached（）函数只调用API并更新我的数据。它不做任何关于底部距离或阈值的计算（从19年11月起）

将平面列表作为单个视图中的唯一组件

从尺寸设置单个视图的样式，如

{{flex:1，height:Dimensions.get（'window'）.height}
如果您希望显示3或4条记录，并希望在到达末尾时加载下一个数据。将onEndReachedThreshold设置为0或0.1。
我已经让它工作了

<Flatlist
    ...
    onEndReached={({ distanceFromEnd }) => {
        if (distanceFromEnd < 0) return;
        ...
    }
    ...
/>

{
if（distancefromfend<0）返回；
...
}
...
/>
如果FlatList位于另一个FlatList或ScrollView中，则在呈现组件时立即查看OnEndRecached调用以解决该问题，而不是将FlatList与另一个组件包装在一起。
大多数情况下，此错误是由于错误使用OnEndRecachedThreashold引起的，这还取决于您呈现的项目数（项目越多，滚动大小越大）

尝试遵循以下逻辑：

如果屏幕上有10个项目，并且每个滚动条上有20个项目，则将onEndReachedThreashold设置为0.8

如果屏幕上有2个或3个项目，并且每个滚动条上呈现10个项目，则将ONEDREACHEDTHREASHOLD设置为0.5

此外，使用initialNumToRender=numItems。出于某种原因，使用此平面列表道具有助于减少多个OneDrached调用的机会

只需使用一个已达到三倍的值即可


其他时候，由于嵌套滚动视图而产生此错误。不要将平面列表放在滚动视图中。相反，请使用平面列表页眉和页脚道具


对于这两种解决方案，我建议将FlatList样式和contentContainerStyle设置为{：1}.
onEndReached阈值范围是0和1，其中0是滚动的顶部，1是滚动的结尾。首先，我会尝试向其中添加0.7，并检查它是否按预期工作。让我知道它是否有帮助！但是0.7并不能解决问题。第一次仍然触发onEndReached，使用这样的类变量怎么样。_挂载？如果是这种情况，您可以尝试添加一些条件呈现来呈现您的
平面列表
，只有在您的
类别
中填充了值之后。类似这样的内容：
categories.length>0？：
您可以尝试在
中添加此条件。类似这样的内容：
{categories？：}
。你可以在这里找到更多的例子：让我知道它是否有效hi！很抱歉，我在其他问题上遇到了严重的技术问题，现在我又回到了这个问题：）我尝试了你的解决方案，但它只是停止了
onEndReached
行为。而且我不熟悉
构造函数（道具）
syntax，我们可以试用一下
ES6
语法吗？我有点喜欢你的逻辑：）有趣。OneDreached只被触发一次或者没有。它只呈现第一个页面hi@llario我可以确认它被调用过一次，即使使用你的解决方案，也就是这个.setState（{OneDreachedCalledDuringMomentum:true}）使用
onMomentumScrollBegin
仅在您滚动滑动（即拖动、拉动和释放）时有效。如果您缓慢拖动到末端（不释放），则不会注册。当flatlist定义了所有函数时，为什么我们要用lodash实现？为什么react native不解决这些简单问题。虽然我是debounce的粉丝，但这个解决方案不起作用。列表
onEndReached = ({ distanceFromEnd }) => {
    if(!this.onEndReachedCalledDuringMomentum){
        this.fetchData();
        this.onEndReachedCalledDuringMomentum = true;
    }
}

render() {
    const {height} = Dimensions.get('window');
    return (    
        <View style={{flex:1, height:height}}>
            <FlatList
                data={this.props.trips_uniques}
                refreshing={this.props.tripsLoading}
                onRefresh={()=> this.props.getTripsWatcher()}
                onEndReached={()=>this.props.getMoreTripsWatcher()}
                onEndReachedThreshold={0.5}
                renderItem={({item}) => (
                <View style={Style.card}> 
                    ...
                    ...
                </View>
                )}
                keyExtractor={item => item.trip_id}
            />
        </View>
    )
}

<Flatlist
    ...
    onEndReached={({ distanceFromEnd }) => {
        if (distanceFromEnd < 0) return;
        ...
    }
    ...
/>