reactjs - React Native 在 ScrollView 中延迟加载 250 张图像

Question

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

有其他方法可以加载这些图像吗？看起来 Flatlist 是比 Scrollview 更好的选择，但我没有可以调用 onEndReach 的函数

Answer 1

我发现了一篇关于提高 Flatlists 性能的非常好的文章 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 张图像的整个列表，没有任何问题。当我开始从底部向上滚动时，屏幕变得有点不稳定，但这是我已经工作的最佳解决方案。