React Native 在滚动视图中延迟加载 250 张图像

Question

我有 250 个处于状态的对象，我正在尝试将它们加载到滚动视图中，每个对象都有一个图像。我正在使用 react-native-lazyload，它适用于大约前 75 张图像，然后滚动开始减慢到停止，几乎每次都在同一个位置。

我可以通过其他方式加载这些图片吗？看起来 Flatlist 比 Scrollview 更好，但是我没有可以调用 onEndReach

的函数

Answer 1

我发现了一篇关于提高平面列表性能的非常好的文章 here。我最终使用了具有以下设置的 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
    updateCellsBatchingPeriod={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />

我现在可以以合理的速度滚动浏览包含 250 张图片的整个列表，没有任何问题。当我开始从底部向上滚动时，屏幕有点抖动，但这是我使用过的最佳解决方案。

React Native 在滚动视图中延迟加载 250 张图像

React Native lazy loading 250 images in a Scroll View

reactjs

react-native

react-native-flatlist