Событие FlatList onEndReached не работает в ScrollView на React-Native

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>

Это код компонента ProductSearchResults с FlatList.

  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

Это не проблема 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 для родительской анимации. Wi sh, чтобы помочь вам.

Answer 2

Замените эту строку:

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

на эту:

onEndReachedThreshold={0.5}

, и она будет работать.