Ужасная производительность перевернутого Flatlist на Android, когда на экране много текста

Question

Я создаю приложение для чата и с тех пор React-Native версия 0.63, У меня ужасная производительность, когда в перевернутом Flatlist на Android используются длинные тексты.

Вот репродукция закуски, демонстрирующая проблему (видна только при попытке использовать физический телефон Android).

Я сообщил об ошибке. Это должно быть довольно вопиющим для любого, кто создает приложение для чата с перевернутым Flatlist, но почему-то я не вижу, чтобы об этой проблеме нигде говорили.

Это заставило меня подумать, что, может быть, другие как-то решили это? Если да, то как я могу это решить? Из-за этого мое приложение сейчас практически невозможно использовать.

Answer 1

Я решил это, применив стиль к плоскому списку и представлению рендеринга. Это какая-то проблема с android 11, так как в предыдущих версиях этого не было с перевернутыми списками. добавить стиль scaleY: -1 в плоский список и в контейнер представления, которое вы собираетесь визуализировать, например:

       return (
  <FlatList
    // ...
    style={{scaleY: -1}}
    renderItem={({item}) => {
      return (
        <View style={{scaleY: -1}}>
          {/* cell content */}
        </View
      );
    }}
  >
);

Answer 2

Собственно, Flatlist компонент был написан лучше, чтобы иметь лучшую производительность, чем другие компоненты списка, такие как ScrollView. Но вы должны учитывать несколько принципов для очень длинного списка, такого как чат:

• Уникальный ключ: для того, чтобы иметь уникальные ключи для кеширования и переупорядочивания наилучшим образом, это ВЫ должны передать уникальный ключ, потому что ReactJS просто используйте item.key а если его нет, то ReactJS использовать indexи это корень проблемы с производительностью, SO, вы должны использовать подпорку это имя keyExtractor и сделать хорошую функцию для создания уникальных ключей.

• Пропуск измерения динамического содержимого: чтобы избежать повторного вычисления измерений элементов при каждом повторном рендеринге, вы можете использовать опору с именем getItemLayout и пройти width, height, offset, index и т.д. добавление getItemLayout может помочь вам значительно повысить производительность для длинных списков с несколькими элементами.

• Определить количество начальных элементов: вы можете определить количество элементов для загрузки и не показывать видимые элементы, это может быть немного сложно, но я думаю, используя initialNumToRender может помочь вам при начальной загрузке, после начальной вы можете обрезать видимые элементы, которые не отображаются на экране просмотра.

• Удалить обрезанные элементы: для этого вы можете использовать имя опоры, которое removeClippedSubviews но заботьтесь об этом. возможно, в некоторых ситуациях есть ошибка.

По моему опыту, эти способы могут улучшить производительность длинных списков. Я надеюсь, что это поможет вам, и, возможно, есть еще несколько уловок для повышения производительности.