Странное поведение FlatList после добавления новых данных - множественная автоматическая прокрутка - PullRequest
Новая
       4

Странное поведение FlatList после добавления новых данных - множественная автоматическая прокрутка

0 голосов
/ 13 мая 2019

У меня есть список данных, который показывает фид постов, когда пользователь прокручивает, список автоматически прокручивается несколько раз вверх или вниз, что приводит к очень плохому UX

, пробовал решение, предоставленное здесь: https://stackoverflow.com/questions/43611485/prevent-flatlist-from-scrolling-when-new-items-are-added#=, но, похоже, это не работает для меня. 

<FlatList
                        keyboardDismissMode = 'on-drag'
                        keyboardShouldPersistTaps = 'always'
                        getItemLayout={(data, index) => (
                        {length: 575, offset: 575 * index, index}
                    )}
                        onScroll = {(event) => {
                            this.flatListOffset = event.nativeEvent.contentOffset.y
                            this.setState({
                                scrollOffset: event.nativeEvent.contentOffset.y
                            })
                        }}
                        contentContainerStyle={{
                            flexGrow: 1,
                            width: Dimensions.get('window').width
                        }}
                        refreshControl={
                            <RefreshControl
                                progressViewOffset={120}
                                refreshing={this.state.refreshing}
                                onRefresh={this._onRefresh.bind(this)}
                            />
                        }
                        ref={(feedView) => (this.feedView = feedView)}
                        data={this.state.feed}
                        onEndReached={() => {
                            if (this.state.hasNextPage && !this.state.loadingMore) {
                                    this.paginateFeed()
                            }
                        }}
                        ListHeaderComponent={this._renderCirclesBar}
                        ListEmptyComponent={this._renderEmptyState}
                        ListFooterComponent={() =>
                            !this.state.loadingMore ? null : (
                                <ActivityIndicator color="#2962FF" size="large" />
                            )
                        }
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderItem}

                    />

затем в какой-то момент: 

this.setState({ feed: this.state.feed.concat(....) })

GIF, объясняющий проблему: https://gifyu.com/image/9gDD

...