FlatList onEndReached 事件在 React-Native 的 ScrollView 中不起作用

Question

我将使用 FlatList 显示项目，FlatList 组件是 ScrollView 的子组件，因为有一些动画。 OnEndReached 事件在没有父 ScrollView 的情况下工作，但在 ScrollView 中，对我不起作用。我确定为什么会这样。我应该将 ScrollView 用于动画并处理 FlatList 事件。有什么解决办法吗？

这是我的 FlatList 代码和结构。

<Animated.ScrollView style={{ flex: 1 }}
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
     { useNativeDriver: true }
  )}>

   <ProductSearchResults
      products={this.state.products}
      itemAction={this.navigateToProduct}
      onLoadMore={ async () => {await this.findProducts();}}
      more={this.state.more} />

</Animated.ScrollView>

这是带有 FlatList 的 ProductSearchResults 组件代码。

  render() {
    const { products, setScrolling } = this.props;

    return (
      <FlatList
        contentContainerStyle={styles.container}
        data={products}
        initialNumToRender={1}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString() }
        removeClippedSubviews={false}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        legacyImplementation={false}
        onEndReached={({ distanceFromEnd }) => {
          console.log('onEndReached:', distanceFromEnd); **// not working**

          if (this.props.more && !this.onEndReachedCalledDuringMomentum)
            this.props.onLoadMore();
        }}
        onEndReachedThreshold={Platform.OS === 'ios' ? 0 : Dimensions.get('window').height / 2}
        onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
        scrollsToTop={false}
        ListFooterComponent={
          this.props.more && <InnerLoading />
        }
        onScrollBeginDrag={() => setScrolling(true)}
      />
    );
  }

Answer 1

替换此行：

onEndReachedThreshold={Platform.OS === 'ios' ? 0 : Dimensions.get('window').height / 2}

有了这个：

onEndReachedThreshold={0.5}

它会起作用。

Answer 2

这不是 onEndReached 事件问题。也许这个事件对你有用，并且会在你的项目上安装 FlatList 时发生。有一个问题是您的结构不正确。为了使此事件正常工作，您应该在没有 ScrollView 的情况下更改结构，并且您的代码有可能这样做。您可以删除 ScrollView 组件。

   <ProductSearchResults
      products={this.state.products}
      itemAction={this.navigateToProduct}
      onLoadMore={ async () => {await this.findProducts();}}
      more={this.state.more}
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])} 
   />


   <FlatList
    .....
    onScroll={this.props.onScroll}
    .....

   />

和上面的代码一样，可以在FlatList上为父动画添加滚动事件。希望能帮到你。

FlatList onEndReached 事件在 React-Native 的 ScrollView 中不起作用

FlatList onEndReached event not working in ScrollView on React-Native

scrollview

react-native

react-native-flatlist