如何使用 getItemLayout 道具<flatlist />在 React Native 中？

Question

我有一個平面列表。 數據數組是一本書的內容（段落、圖像、子標題）。 如何在我的FlatList上正確實現getItemLayout道具？ 我知道這是假設告訴FlatList每個項目的高度以使其更具性能。 但是我如何找出每個項目的大小？ 這是我通過猜測來任意確定含義的東西嗎？ 每件商品的尺寸都不同。 我嘗試在 getItemLayout 中輸入隨機值只是為了看看會發生什么，但是我真的不知道如何判斷哪個值是正確的值。

這是我的平面列表

 <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 };
      }}
    />

這是我的數據數組的一部分...

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",
  },

這是我的渲染項 function...

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

這是我的 ListItem 組件...

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>
      );
    }
  }
}

我時不時收到這個警告...

VirtualizedList：您有一個更新緩慢的大型列表 - 確保您的 renderItem function 呈現遵循 React 性能最佳實踐（如 PureComponent、shouldComponentUpdate 等）的組件。Object {“contentLength”：14102.476305625“prevDt”： : 2141,

有人告訴我這是因為我沒有使用 getItemLayout 道具。 我還注意到滾動有時有點小故障/滯后。 我的目標是在沒有 class 組件的情況下完成我的項目，但是我聽說使用 PureComponents 是對高性能 flatLists 的推薦，所以我認為它可以解決我的滯后問題。

只是為了清楚起見顯示內容的樣子......

Answer 1

如果您的列表項始終具有相同的高度，則可以將其傳遞給該道具以防止 React Native 每次都必須測量它們。 即使您沒有將高度明確設置為樣式，計算出的高度也可能相同。 您可以通過在開發工具中檢查您的項目來找到這一點。

但是，性能問題很可能是多種因素的結果。 您正在渲染的圖像有多大？ 它們是否比渲染尺寸大得多，並且可以調整大小嗎？ 您要渲染多少個項目？

另外，請嘗試刪除您的useCallback上的renderItem 。 這實際上可能會惡化這里的性能，並且是不必要的