ReactNative Flatlist onEndReached not working

问题

Im trying to call a function on onEndReached of a FlatList but it's not working.

I'm calling the this.state.pageNo at the end and it's not updating. I want to use this logic later in infinite scroll but not able to get it working now.

 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;

回答1:

The property you are looking for in FlatList is onEndReachedThreshold instead of onEndThreshold.

回答2:

In my case the problem was with nativebase <Content>. It was creating problems when <FlatList> was used inside it. Solution :

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

Source : https://github.com/GeekyAnts/NativeBase/issues/1736

回答3:

There is an issue for that here: https://github.com/facebook/react-native/issues/14312. Looks like a lot of people are experiencing the same. There is a suggestion to change the onEndReachedThreshold to value bigger that 0, for example: 0.3.

回答4:

First of all, you should make sure that your onEndReached listens to your onMomentumScrollBegin and onMomentumScrollEnd props of FlatList. Another important thing is distanceFromEnd param of onEndReached prop of FaltList. So you can use it as follows:

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

And then you can define your onEndReached function, which will work as needed.

Hope this will help someone to save time on this.

来源：https://stackoverflow.com/questions/47351592/reactnative-flatlist-onendreached-not-working

标签

reactjs

react-native

react-native-flatlist