关于 FlatList 的 onEndReached 属性



  • 想做一个上拉刷新的功能,期望在上拉至底部后触发 onEndReached 方法,但实际效果上有问题,总是需要将列表下拉一段距离然后再上拉至底部才能加载数据,请问该怎么解决呢?
    下面是我的代码,这里只取 render 方法:

    ...
    render() {
        const data = [{a:1},{a:2},{a:3},{a:4},{a:1},{a:2},{a:3},{a:4},{a:1},{a:2},{a:3},{a:4},{a:1},{a:2},{a:3},{a:4}]
        let i = 0;
        return (
            <ScrollableTabView
                scrollWithoutAnimation={true}
                locked={true}
                renderTabBar={() => <NavBarTabTop tabName={["终端","播放器"]} />}
            >
                <View>
                    <Text>终端列表</Text>
                    <FlatList
                        style={{height:Dimensions.get("window").height - 100}}
                        refreshing={false}
                        data={data}
                        renderItem={({item}) => <Text style={{height:50,borderBottomWidth:1}}>{item.a}</Text>}
                        onRefresh={()=>{
                            console.log("正在刷新")
                            return;
                        }}
                        onEndReached={(info)=>{
                            console.log("bingo")
                            clearTimeout(window.timer)
                            window.timer = setTimeout(()=>{
                                data.push({a:"新加载的内容"},{a:"---------------------"},{a:i++})
                            },2000)
                        }}
                    >
                    </FlatList>
                </View>
                <View><Text>播放器列表</Text></View>
            </ScrollableTabView>
        );
    }
    ...
    

    谢谢大家