反应本机懒惰在滚动视图中加载250张图像

Question

我有250个对象，我正在尝试在每个图像中加载滚动视图。我正在使用React-Native-Lazyload，它适用于前75张图像，然后滚动开始放慢速度，几乎每次都在同一地点。

我可以加载这些图像的不同方式吗？看来一个lantlist比scrollview是更好的选择，但是我没有功能，我可以称呼ordendreach

Answer 1

我在这里发现了提高lantlists的性能的非常好的文章。我最终使用了以下设置的套件：

  <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张图像的整个列表，而没有任何问题。当我开始从底部滚动后滚动时，屏幕有点生干，但这是我可以使用的最好的解决方案。