Объедините ленивую загрузку с переходом на индекс для массива больших данных - PullRequest
Новая
       7

Объедините ленивую загрузку с переходом на индекс для массива больших данных

0 голосов
/ 30 марта 2020

Я использую Flatlist для рендеринга массива со всеми значениями от 200 до 20 000. Я начинаю с добавления 20 значений из bigArray в itemsToRender и загружаю их напрямую. На свитке добавляю еще 20 и так далее. Однако над списком находится график, который отображает все данные, и когда я нажимаю на графике, я хочу перейти к этому конкретному значению данных в списке.

Моя проблема заключается в том, как реализовать этот переход в отношении ленивый рендеринг. 

handlePressInGraph = () => {
    this.xPress = event.nativeEvent.locationX
    this.indexInBigArray = Math.floor(this.xPress/width*100)
    this.flatListRef.scrollToIndex({ animated: true, index: this.indexInBigArray});
}

handleLoadMore = () => {
    this.setState(state=>({indexToRenderFrom: state.indexToRenderFrom + 20}), () => this.appendData())
}

appendData = () => {
    let tmpArr = this.formattedLog.slice(this.state.indexToRenderFrom,this.state.indexToRenderFrom+20)
    this.setState(state => ({
        itemsToRender: [...state.itemsToRender, ...tmpArr]
    }))
}

<FlatList
    ref={(ref) => { this.flatListRef = ref }}
    keyExtractor={(item, index) => item}
    onViewableItemsChanged={this.changeHeaderDay}
    onEndReached={() => this.handleLoadMore()}
    onEndReachedThreshold={0.5}
    initialNumToRender={10}
    data={this.state.itemsToRender}
    renderItem={({item, index}) =>
    <ListItem />}
/>
...