当我有多个FlatList时未调用onEndReached

Question

我有2个flatList。父母和孩子。在父平面列表中，我将其称为子平面列表（可重复使用的组件）。在子单位列表onMomentumScrollBegin()和onEndReached()中没有调用，但是如果我在父单位列表中使用onMomentumScrollBegin()和onEndReached()则可以正常工作。 有没有一种方法只能在子平面列表中调用这两种方法，而不能从父平面列表中调用这两种方法？

父FlastList：

class Parent extends React.Component {
  constructor(props: any) {
    super(props);
    if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }
    this.onEndReachedCalledDuringMomentum = true;
    this.state = {
      refreshing: false,
      isActionButtonVisible: true,
    };
  }


  //Calculating the page number to get next set of items based on page number.
  calculatePageNumber = async ({distanceFromEnd}) => {
    if (
      !this.onEndReachedCalledDuringMomentum &&
      this.state.pageNo !== this.state.pageLimit
    ) {
      await this.setState({pageNo: this.state.pageNo + 1, loadMore: true});
      this.onRefresh(false);
      this.onEndReachedCalledDuringMomentum = true;
    }
  };
renderItem = () => {
//calling child reusable component here.
//Here we have multiple reusable component which will called based on some condition
}

  render() {
    const {loading, latestNewsData} = this.state;
    return (
      <SafeAreaView style={styles.container}>
        {loading ? (
          <View style={styles.loadingview}>
            <ActivityIndicatorView />
          </View>
        ) : (
          <View>
            {latestNewsData.length > 0 ? (
              <View>
                <FlatList
                  scrollEventThrottle={16}
                  onScroll={event => this.handleScroll(event)}
                  onEndReached={this.calculatePageNumber}
                  onEndReachedThreshold={0.7}
                  onMomentumScrollBegin={() => {
                    this.onEndReachedCalledDuringMomentum = false;
                  }}
                  data={this.state.latestNewsData}
                  renderItem={this.renderItem}
                  keyExtractor={(x, i) => i.toString()}
                  refreshControl={
                    <RefreshControl
                      refreshing={this.state.refreshing}
                      onRefresh={() => {
                        this.setState({
                          refreshing: true,
                        });
                        //Latestnews API request
                        this.onRefresh(true);
                      }}
                    />
                  }
                />
                {/* Showing bottom loader when more data are getting fetched from the server */}
                {this.state.loadMore ? (
                  <ActivityIndicator size="small" color={Colours.grey} />
                ) : (
                  <View />
                )}
              </View>
            ) : (
              <EmptyComponent
                onPress={() => {
                  this.onRefresh(false);
                }}
                errorText={translate('try_again')}
              />
            )}
          </View>
        )}
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: moderateScale(10),
    marginBottom: moderateScale(40),
  },
  loadingview: {
    marginTop: verticalScale(300),
  },
});

export default Parent;

子组件

class Child extends React.Component {
  constructor(props: any) {
    super(props);
    this.onEndReachedCalledDuringMomentum = true;
  }


//I want to invoke this one, but this is not called

  calculatePageNumber = async ({distanceFromEnd}) => {
    if (!this.onEndReachedCalledDuringMomentum) {
      console.log('****************** working *****************');
      this.onEndReachedCalledDuringMomentum = true;
    }
  };



  renderItem = ({item, index}: any) => {
    return (
      <View>
        //rendering my child component items here.
      </View>
    );
  };



  renderSeparator = () => {
    return <View style={styles.separator} />;
  };

  render() {
    const {latestNewsData}: any = this.state;
    return (
      <View accessible={parentEnabled} style={styles.container}>
        {latestNewsData.length > 0 ? (
          <FlatList
            scrollEventThrottle={16}
            onMomentumScrollBegin={() => {
              this.onEndReachedCalledDuringMomentum = false;
            }}
            onEndReached={this.calculatePageNumber}
            onEndReachedThreshold={0.7}
            data={latestNewsData}
            renderItem={this.renderItem}
            keyExtractor={(x, i) => i.toString()}
            ListHeaderComponent={this.renderHeader(this.props.LatestNewsData)}
            ItemSeparatorComponent={this.renderSeparator}
          />
        ) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
  subContainer: {
    flex: 1,
    flexDirection: 'row',
    alignSelf: 'center',
    width: horizontalScale(355),
  },
  headerView: {
    height: moderateScale(55),
    flexDirection: 'row',
    width: horizontalScale(353),
    alignItems: 'center',
  },
  headerText: {
    fontSize: horizontalScale(31),
    fontWeight: '500',
    color: Colors.black,
    fontFamily:
      Platform.OS === 'ios'
        ? FontFamily.publicoBannerMediumIos
        : FontFamily.publicoBannerMediumAndroid,
  },
  headerTitle: {
    marginLeft: horizontalScale(0),
  },
  imageContainer: {
    width: moderateScale(96.45),
    height: moderateScale(71),
    backgroundColor: Colors.greyLight,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: moderateScale(96.45),
    height: verticalScale(71),
    backgroundColor: Colors.greyLight,
  },
  separator: {
    height: verticalScale(1),
    width: horizontalScale(353),
    alignSelf: 'center',
    backgroundColor: Colors.grey,
    marginVertical: verticalScale(15),
  },
  thickBorder: {
    width: horizontalScale(355),
    height: verticalScale(8),
    backgroundColor: Colors.black,
    marginBottom: verticalScale(15),
  },
  textView: {
    flexDirection: 'column',
    width: horizontalScale(233),
    marginLeft: horizontalScale(10),
    marginTop: moderateScale(10),
  },
  titleTextView: {},
  subTextView: {
    flex: 1,
    marginTop: moderateScale(10),
    alignItems: 'flex-end',
    flexDirection: 'row',
  },

  titleText: {
    fontSize: moderateScale(16),
    fontWeight: '500',
    color: Colors.black,
    fontFamily: FontFamily.fontFamilyMedium,
    letterSpacing: moderateScale(0.42),
    lineHeight: moderateScale(18),
  },
  categoryText: {
    color: '#D0021A',
    fontFamily: FontFamily.fontFamilyBold,
    fontSize: moderateScale(9),
    fontWeight: 'bold',
    marginRight: moderateScale(10),
    letterSpacing: moderateScale(1.63),
    textAlign: 'left',
  },
  hourText: {
    fontFamily: FontFamily.fontFamilyRegular,
    fontSize: moderateScale(9),
    color: '#515151',
    textAlign: 'left',
  },
  AddView: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: verticalScale(10),
    height: 60,
  },
});



export default Child;