Как использовать опору getItemLayout для ‹FlatList /› в React Native?

У меня есть Flatlist. Массив данных - это содержимое книги (абзацы, изображения, подзаголовки). Как правильно реализовать свойство getItemLayout в моем FlatList? Насколько я понимаю, это делается для того, чтобы указать FlatList высоту каждого элемента, чтобы сделать его более эффективным. Однако как мне узнать размер каждого предмета? Это что-то, что я должен определить произвольно, путем предположений? Каждый предмет отличается по размеру. Я пробовал вводить случайные значения в getItemLayout, чтобы посмотреть, что происходит, однако я действительно не знаю, как определить, какое значение будет правильным.

Это мой 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 };
      }}
    />

Это часть моего массива данных ...

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 ...

  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 отображает компоненты, соответствующие лучшим практикам производительности React, такие как PureComponent, shouldComponentUpdate и т. Д. Object {contentLength: 14102.4765625, dt: 630, prevDt: 2141,

Мне сказали, что это потому, что я не использую опору getItemLayout. Я также заметил, что прокрутка иногда немного тормозит / тормозит. Я стремился сделать свой проект без компонентов класса, однако я слышал, что использование PureComponents было рекомендацией для эффективных плоских списков, и поэтому я заставил думать, что это решит мою проблему с задержкой.

Просто покажу, как выглядит контент для ясности ...