ReactNative平面列表onEndReached不起作用

w3nuxt5m  于 2022-11-25  发布在  React
关注(0)|答案(7)|浏览(348)

我试图调用FlatList的onEndReached上的函数,但它不起作用。
我在最后调用了this.state.pageNo,但它没有更新。我想在无限滚动中使用这个逻辑,但现在不能让它工作。

import React, { Component } from "react";
 import {
  View,
  Text,
  StyleSheet,
  Button,
  TouchableOpacity,
  FlatList,
  Alert
  } from "react-native";

 class InfiniteScrollRedux extends Component {
   constructor(props) {
      super(props);
      this.state = {
        loading: false,
        pageNo: 1,
        data: [
            { id: 1, name: "Name01" },
            { id: 2, name: "Name02" },
            { id: 3, name: "Name03" },
            { id: 4, name: "Name04" },
            { id: 5, name: "Name05" },
            { id: 6, name: "Name06" }
        ]
    };
}

myFunction = () => {
    this.setState({ pageNo: this.state.pageNo++ });
};

render() {
    return (
        <View>
            <FlatList
                data={this.state.data}
                renderItem={({ item }) => (
                    <View style={mystyle.mainCard}>
                        <Text style={mystyle.titleText}> {item.id} </Text>
                        <View style={{ marginTop: 200 }} />
                        <Text style={mystyle.nameText}> {item.name} </Text>
                    </View>
                )}
                keyExtractor={item => item.id}
                onEndReached={this.myFunction}
                onEndThreshold={0}
            />
            <Text style={{ margin: 20, padding: 20, fontSize: 20 }}>
                {this.state.pageNo}
            </Text>
        </View>
      );
   }
}

const mystyle = StyleSheet.create({
 mainCard: {
    backgroundColor: "#2F4F4F",
    marginBottom: 1,
    padding: 5
},
titleText: {
    fontSize: 20,
    color: "#F0FFFF"
},
nameText: {
    fontSize: 14,
    color: "#F0FFFF"
 }
 });

 export default InfiniteScrollRedux;
vx6bjr1n

vx6bjr1n1#

这个问题困扰了很长时间。我认为React在计算屏幕高度和容器高度时存在混淆。所以我们能做的最好的事情是将onEndReachedThreshold的值增加到比0高的值,再增加到0.2, 0.4等。

8wtpewkr

8wtpewkr2#

为了提高onEndReached的性能,我建议为contentContainerStyle提供精确的高度,例如:

contentContainerStyle={{ height : items.length * itemHeight }}
vdgimpew

vdgimpew3#

只是分享一个原因,为什么它不工作在我这边。我的平面列表是在一个滚动视图,这是不让平面列表知道它已经达到了年底。我把我的平面列表移出滚动视图,它又开始工作了!

8wtpewkr

8wtpewkr4#

在我的例子中,问题出在nativebase <Content>上。当在它内部使用<FlatList>时,它会产生问题。解决方案:

<Content
  style={{flex: 1}}
  contentContainerStyle={{flex: 1}} // important!
>

来源:https://github.com/GeekyAnts/NativeBase/issues/1736

cczfrluj

cczfrluj5#

这里有一个问题:https://github.com/facebook/react-native/issues/14312。看起来很多人都遇到了同样的问题。建议将onEndReachedThreshold的值更改为大于0的值,例如:0.3.

jdzmm42g

jdzmm42g6#

您在平面列表中查找的属性是onEndReachedThreshold,而不是onEndThreshold。

axkjgtzd

axkjgtzd7#

首先,你应该确保你的onEndReached监听你的FlatListonMomentumScrollBeginonMomentumScrollEnd属性。另一个重要的事情是FaltListonEndReached属性的distanceFromEnd参数。所以你可以如下使用它:

onMomentumScrollBegin={() => this.setState({ scrollBegin: true })}
          onMomentumScrollEnd={() => this.setState({ scrollBegin: false })}
          onEndReached={({ distanceFromEnd }) =>
            distanceFromEnd<=0.5&&
            this.state.scrollBegin &&
            this.onEndReached()
          }

然后您可以定义onEndReached函数,它将根据需要工作。
希望这能帮助某人在这方面保存时间。

相关问题