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

【问题标题】：React Native lazy loading 250 images in a Scroll ViewReact Native 在滚动视图中延迟加载 250 张图像
【发布时间】：2019-07-28 15:31:54
【问题描述】：

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

我可以通过其他方式加载这些图片吗？似乎 Flatlist 比 Scrollview 更好，但我没有可以调用 onEndReach 的函数

【问题讨论】：

图像存储在设备或互联网上的什么位置？
我更喜欢recycler list view。虽然不如 FlatList 好用，但做得很好
@Andrew 在互联网上
你考虑过使用react-native-fast-image吗？
@Andrew 我尝试使用它，但遇到了“不变违规：requireNativeComponent：在 UIManager 中找不到“FastImageView”。我正在使用 crna 2.0.2。我不确定我是否可以在不弹出的情况下使用它。

标签： reactjs react-native react-native-flatlist

【解决方案1】：

我发现了一篇关于提高 Flatlists 性能的非常好的文章here。我最终使用了具有以下设置的平面列表：

  <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 张图片列表。当我开始从底部向上滚动时，屏幕会有点卡顿，但这是我得到的最佳解决方案。

【讨论】：

我认为第二个“maxToRenderPerBatch”应该是“updateCellsBatchingPeriod”。否则很好的答案。谢谢！