javascript - 当 List 包含图像时，React native flatlist 感觉很慢

Question

我为化身使用 64x64 图像。它的尺寸非常小。我的应用程序帧在 scrool 时下降到 25-35 fps。 如何优化 flatList 图像。？

  <FlatList
        data={this.props.data}
        extraData={{}}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
        maxToRenderPerBatch={5}
        ListHeaderComponent={
          <CommentsTextInput $comments={this.props.$comments} />
        }
        stickyHeaderIndices={[0]}
        initialNumToRender={5}
        removeClippedSubviews={true}
        updateCellsBatchingPeriod={25}
        windowSize={11}
      />

Answer 1

您可以使用 getItemLayout 属性来减少列表滚动时的工作量 https://reactnative.dev/docs/flatlist#getitemlayout

确保图像被缓存会有所帮助。 在一定程度上做到了这一点，但您可能会发现使用像 react-native-fast-image 这样的工具可以提高性能(警告 - 不过要小心这个库，它可以有内存问题 - 确保你配置文件以确保它按预期工作) https://github.com/DylanVann/react-native-fast-image

避免对您的列表项进行额外渲染。将 PureComponent 用于基于类的组件，或将 memo 用于功能组件。 https://reactjs.org/docs/react-api.html#reactpurecomponent https://reactjs.org/docs/react-api.html#reactmemo

使用 keyExtractor 或小心添加您的 key ，不要重复以确保 React 可以优化对列表的更改。