React Native отложенная загрузка 250 изображений в режиме прокрутки

#reactjs #react-native #react-native-flatlist

#reactjs #react-native #react-native-плоский список

Вопрос:

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

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

1. Где изображения хранятся на устройстве или в Интернете?

2. Я предпочитаю просмотр списка переработчиков . Хотя он не так прост в использовании, как FlatList, но выполняет свою работу довольно хорошо

3. @Andrew в Интернете

4. Рассматривали ли вы возможность использования react-native-fast-image ?

5. @Andrew Я пытался его использовать, но столкнулся с «Нарушением инварианта: requireNativeComponent: «FastImageView» не был найден в UIManager». Я использую crna 2.0.2. Я не уверен, смогу ли я использовать это без извлечения.

Ответ №1:

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

   <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
    updateCellsBatchingPeriod={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />

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