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

Question

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

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

Answer 1

我发现提高Flatlists的表现确实不错写了这里。我最终使用了具有以下设置的 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 张图像列表，没有任何问题。当我开始从底部向上滚动时，屏幕变得有点生涩，但这是我已经开始工作的最佳解决方案。