时间戳

首页 > 解决方案 > React Native ScrollView，onEndReached没有触发

react-native - React Native ScrollView，onEndReached没有触发

问题描述

我正在尝试为我的 ScollView 创建一个“加载更多”功能。目前我有一个按钮，按下该按钮会将更多元素加载到 ScrollView 中。这一切都按预期工作。但是，我现在试图在用户接近 ScrollView 的末尾时触发它，但不幸的是该功能没有触发。我尝试更改 onEndReachedThreshold 的值（更大和更小），但没有成功。我在下面粘贴了我的模块返回。非常感谢所有帮助。

return (

        <View style={{ width: "100%", height: "100%" }}>
            <ScrollView showsVerticalScrollIndicator={false} onEndReachedThreshold={10} onEndReached={() => { console.log("end reached"); this.props.pEnd ? this.props.loadMore() : null }} refreshControl={<RefreshControl refreshing={this.props.refreshing} onRefresh={() => { this.props.getData(0) }} />} style={{ width: "100%", flexDirection: "column" }}>

                <View style={{ height: 10, width: "100%" }}></View>
                {scrollables}
                {this.props.pEnd ? null : <View style={{ height: 25, width: "100%", flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                    <TouchableOpacity
                        style={{ height: "100%", width: 100, backgroundColor: "white", borderRadius: 20, padding: 2, justifyContent: "center", alignItems: "center" }}
                        onPress={() => { this.props.loadMore() }}>
                        <Text>Load Older...</Text>
                    </TouchableOpacity>
                </View>}


                <View style={{ width: "100%", height: "10%", paddingBottom: "20%" }}></View>
            </ScrollView>

        </View>);

标签： react-nativescrollviewreact-native-scrollview

解决方案

请记住，您的 FlatList 不应位于 ScrollView 组件中。我花了一整天的时间来解决这个问题，这只是一个小错误。所以，我认为你们也避免在任何 ScrollView 组件中使用 Flatlist

推荐阅读