我如何为 <FlatList/> 使用 getItemLayout 道具?在 React Native 中? [英] How do I use the getItemLayout prop for <FlatList/> in React Native?

问题描述

我有一个平面列表.数据数组是一本书的内容(段落、图像、副标题).如何在我的 FlatList 上正确实施 getItemLayout 道具?我知道这是假设告诉 FlatList 每个项目的高度以使其更具性能.但是，我如何找出每个项目的大小?这是我要通过猜测来任意确定含义的东西吗?每个项目都是不同的大小.我尝试在 getItemLayout 中输入随机值只是为了看看会发生什么，但是我真的不知道如何判断哪个值是正确的值.

I have a Flatlist. The data array is the contents of a book(paragraphs, images, subHeadings). How do I implement the getItemLayout prop correctly on my FlatList? I understand this is suppose to tell the FlatList the height of each item to make it more performant. However how am I to find out the size of each item? Is that something that I am to determine arbitrarily meaning by guesstimating? Every item is a different size. I have tried entering random values in getItemLayout just to see what happens however I don't really know how to tell which value would be the correct value.

这是我的 FlatList

This is my FlatList

 <FlatList
      ref={flatListRef}
      contentContainerStyle={{ paddingHorizontal: 10 }}
      showsVerticalScrollIndicator={true}
      initialNumToRender={10}
      data={dataRef}
      renderItem={renderItem}
      onScrollToIndexFailed={scrollFailToIndex}
      getItemLayout={(data, index) => {
        return { length: 0, offset: 0 * index, index };
      }}
    />

这是我的数据数组的一部分...

This is a piece of my data array...

const dataRef = [
  {
    img: "tr1Cover",
    id: "1Tr 1.cover",
    key: "0",
  },
  {
    text: "Copyright 1933,1940,1941\nAll rights reserved\nV. T. HOUTEFF.",
    style: "plainCenterText",
    key: "1",
  },
  {
    text:
      "In the interest of reaching every truth-seeking mind that desires to escape the path that leads to destruction of both body and soul, this tract will be distributed free of charge as long as this issue lasts.",
    id: "1Tr 2.1",
    style: "plainText",
    key: "2",
  },
  {
    text: "PREFACE PERSONALLY WATCHING FOR EVERY RAY OF LIGHT.",
    style: "subHeading",
    key: "3",
  },
  {
    text:
      "One who entrusts to another the investigation of a message from the Lord, is making flesh his arm, and thus is foolishly acting as without a mind of his own. And  "the mind that depends upon the judgment of others is certain, sooner or later, to be misled. " -- Education, p. 231.",
    id: "1Tr 3.1",
    style: "plainText",
    key: "4",
  },

这是我的 renderItem 函数...

This is my renderItem function...

  const renderItem = useCallback(({ item }) => <ListItem item={item}></ListItem>, []);

这是我的 ListItem 组件...

This is my ListItem Component...

class ListItem extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    if (this.props.item.img) {
      return (
        <Image
          source={Images[this.props.item.img]}
          resizeMode="stretch"
          style={{
            alignSelf: "center",
          }}
        />
      );
    }
    if (this.props.item.text) {
      return (
        <Text selectable={true} style={styles[this.props.item.style]}>
          {this.props.item.text}
          <Text style={styles.pagination}>{this.props.item.id}</Text>
        </Text>
      );
    }
  }
}

我不时收到此警告...

From time to time I get this warning...

VirtualizedList:您有一个更新缓慢的大列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等. Object {内容长度":14102.4765625，dt":630，prevDt":2141，

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object { "contentLength": 14102.4765625, "dt": 630, "prevDt": 2141,

有人告诉我这是因为我没有使用 getItemLayout 道具.我还注意到滚动有时会出现问题/滞后.我的目标是在没有类组件的情况下完成我的项目，但是我听说使用 PureComponents 是对高性能 flatLists 的推荐，所以我认为它可以解决我的滞后问题.

I was told it's because I am not using the getItemLayout prop. I also notice the scrolling is a bit glitchy/laggy at times. I was aiming to do my project without class components however I heard using PureComponents was a recommendation for performant flatLists and so I made one thinking it would solve my lag problem.

为了清晰起见，只显示内容的样子...

Just showing what the content looks like for clarity...

推荐答案

如果您的列表项始终具有相同的高度，您可以将其传递给该道具，以防止 React Native 每次都必须测量它们.即使您没有明确将高度设置为样式，计算出的高度也可能相同.您可以通过在开发工具中检查您的项目来找到这一点.

If your list items consistently have the same height, you can pass it to that prop to prevent React Native from having to measure them every time. Even if you are not explicitly setting the height as a style, the computed height may be the same. You can find this by inspecting your items in dev tools.

不过，性能问题很可能是多种因素造成的.您渲染的图像有多大?它们是否明显大于渲染尺寸，并且可以调整它们的大小吗?您要渲染多少项?

Most likely, though, the performance issues are the result of a number of factors. How large are the images that you're rendering? Are they significantly larger than the rendered dimensions, and could they be resized? How many items are you rendering?

另外，尝试删除 renderItem 上的 useCallback.这实际上可能会降低这里的性能，而且是不必要的

Also, try removing the useCallback on your renderItem. That may actually worsen performance here, and is unnecessary

这篇关于我如何为 <FlatList/> 使用 getItemLayout 道具?在 React Native 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！