FlatList ScrollToIndex с onEndReached - PullRequest
0 голосов
/ 07 февраля 2020

У меня есть FlatList комментариев разной высоты , и мне нужно реализовать прокрутку до какого-то определенного элемента c при открытии модального с этим FlatList.

По какой-то причине метод onEndReached вызывается несколько раз, если я помещаю ScrollToIndex в мой ComponentDidMount. Есть ли какие-либо обходные пути для прокрутки к конкретному элементу списка?

scrollToOffset, initialScroll не являются опциями, потому что у меня разные высоты.

Попытался использовать этот совет и scrollToIndex внутри Обещание

Если я нажму кнопку еще раз, она будет работать нормально, но при первом открытии позиция немного отличается, как будто у нее нет времени на прокрутку или что-то еще.

  render() {
    const { comments } = this.props;
    return (
        <FlatList
          data={comments}
          refreshing={false}
          ref = {(ref) => {this.flatListRef = ref}}
          keyExtractor={this.keyExtractor}
          onRefresh={this.refresh}
          renderItem={this.renderItem}
          onEndReached={this.fetchMore}
          //initialScrollIndex={8} // works only for android
          onScrollToIndexFailed={()=>{}}
          onEndReachedThreshold={0.01}
          // removeClippedSubviews // dont uncomment!!! cause init white list on IOS
          ListEmptyComponent={this.renderEmpty}
        />
    );
  }
   componentDidMount (){
      let wait = new Promise((resolve) => {
          setTimeout(resolve, 400)
      });
      wait.then( () => {
          if(this.props.elementToScrollIndex && this.props.comments) {
            this.flatListRef.scrollToIndex({
              index: this.props.elementToScrollIndex,
              viewPosition: 0
            });
          }
      });
   }

1 Ответ

0 голосов
/ 10 февраля 2020

Плоский список можно рассматривать как все oop элементов, отображаемых один за другим. Таким образом, другой возможный рабочий вариант - прокрутить до каждого элемента после его рендеринга.

renderItem({ item, index }: {item: CommentType, index: number}) { 
  if(this.flatListRef &&
     this.props.elementToScrollIndex &&
     index <= this.props.elementToScrollIndex) {
       setTimeout(()=>{
         this.flatListRef.scrollToIndex({ index: index });
       }
  }
  return (<Comment item={item} index={index} />);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...