ReactNative Flatlist onEndReached 不起作用答案

【问题标题】：ReactNative Flatlist onEndReached not workingReactNative Flatlist onEndReached 不起作用
【发布时间】：2018-05-01 06:52:07
【问题描述】：

我试图在 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;

【问题讨论】：

我复制了你的代码并运行它，它运行良好，你的代码没有问题记住onEndReached 只为一组数据调用了一次
@Ali .. onEndReached called only once for set of data .. 谢谢。
我在这里找到了答案，我最初尝试了 github cmets 中给出的所有解决方案都没有奏效，但最后检查了这个对我有用的答案。希望它也适用于其他人。 stackoverflow.com/questions/48740770/…

标签： reactjs react-native react-native-flatlist

【解决方案1】：

这里有一个问题：https://github.com/facebook/react-native/issues/14312。看来很多人都在经历同样的事情。建议将onEndReachedThreshold 更改为大于 0 的值，例如：0.3。

【讨论】：

【解决方案2】：

您在 FlatList 中查找的属性是 onEndReachedThreshold 而不是 onEndThreshold。

【讨论】：

【解决方案3】：

首先，你应该确保你的onEndReached 监听你的onMomentumScrollBegin 和onMomentumScrollEnd 的FlatList 的props。另一个重要的事情是distanceFromEndonEndReached 的参数FaltList 的属性。所以你可以按如下方式使用它：

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

然后您可以定义您的onEndReached 函数，该函数将根据需要工作。

希望这将有助于某人节省时间。

【讨论】：

onMomentumScrollBegin 和 onMomentumScrollEnd 在我的情况下触发，但 onEndReached 根本不会触发。

【解决方案4】：

就我而言，问题在于 nativebase <Content>。在其中使用<FlatList> 时会产生问题。解决方案：

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

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

【讨论】：

如果因为一些奇怪的要求，你在ScrollView 中有FlatList，那么也将相同的东西（即contentContainerStyle={{flex: 1}}）应用于 ScrollView 工作。

【解决方案5】：

纠结这个问题很久了。我认为React 在计算屏幕高度与容器高度时存在混淆。所以我们能做的最好的事情就是将onEndReachedThreshold 的值增加到高于0 到一些0.2, 0.4 等。

【讨论】：