Реагируйте на ленивую загрузку 250 изображений в режиме прокрутки - PullRequest
Новая
       21

Реагируйте на ленивую загрузку 250 изображений в режиме прокрутки

1 голос
/ 07 марта 2019

У меня 250 объектов в состоянии, которые я пытаюсь загрузить в виде прокрутки с изображением для каждого. Я использую response-native-lazyload, и он работает для первых 75 изображений, затем прокрутка начинает замедляться, почти каждый раз в одном и том же месте.

Есть ли другой способ загрузить эти изображения? Кажется, что Flatlist будет лучшим вариантом, чем Scrollview, но у меня нет функции, которую я могу вызвать onEndReach

1 Ответ

3 голосов
/ 07 марта 2019

Я нашел действительно хорошую статью по улучшению производительности Flatlists здесь .В итоге я использовал Flatlist со следующими настройками: 

  <FlatList
    containerContentStyle={styles.container}
    data={countries}
    renderItem={({ item }) => (
      <View style={styles.results}>
        <Results 
          {...this.props} 
          country={item} 
          handleUpdate={this.handleUpdate}
          pendingCountry={pendingCountry}
        />
      </View>
    )}
    keyExtractor={item => item.alpha2code}
    ListHeaderComponent={() => this.renderHeader()}

    // Performance settings
    removeClippedSubviews={true} // Unmount components when outside of window 
    initialNumToRender={2} // Reduce initial render amount
    maxToRenderPerBatch={1} // Reduce number in each render batch
    maxToRenderPerBatch={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />

Теперь я могу прокручивать весь мой список из 250 изображений в разумном темпе без проблем.Когда я начинаю прокручивать вверх снизу вверх, экран немного дергается, но это лучшее решение, которое я получил.

...