React Native: FlatList с требуемыми изображениями не работает - PullRequest
Новая
       16

React Native: FlatList с требуемыми изображениями не работает

0 голосов
/ 16 ноября 2018

Я изо всех сил пытаюсь получить представление представления списка.

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

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

Каждый элемент содержит только следующее:

  • Миниатюра изображения (квадрат 120px, ~ 3 КБ каждый)
  • название (32 знака)
  • субтитры (120 символов)

И около 100 пунктов в этом списке (совсем немного!)

Все изображения хранятся локально в приложении и импортируются через require.

Пример кода: 

renderItem = (listItem) => {
    const { item, index } = listItem;

    return (
      <Item
        id={index}
        item={item}
        onPress={this.props.onPress}
      />
    );
}

render() {
  return (
    <FlatList
      data={this.props.data}
      renderItem={this.renderItem}
      keyExtractor={this.keyExtractor}
    />
  );
}

А Item компонент: 

render() {
    const { item, onPress } = this.props;
    const imgSrc = getAvatar(item.avatar);

    return (
      <TouchableOpacity onPress={onPress.bind(this, id)} style={styles.section} activeOpacity={0.8}>
        <Image source={imgSrc ? imgSrc : defaultAvatar} style={styles.image} resizeMode={'contain'} />
        <View style={styles.container}>
          <Text style={styles.heading}>{item.name}</Text>
          <Text style={styles.body} numberOfLines={2}>{item.blurb}</Text>
        </View>
      </TouchableOpacity>
    );
}

с getAvatar: 

export const getAvatar = name => ({
    ["john"]: require('../assets/images/john.jpg'),
    ["jane"]: require('../assets/images/jane.jpg'),
    ["smith"]: require('../assets/images/smith.jpg'),
    ... plus a lot more...
  })

Я попытался добавить следующее к FlatList, но производительность просто ничего не делает или задерживается при начальной загрузке:

  • removeClippedSubviews
  • initialNumToRender ограничено этим меньшим числом

Вышесказанное является только проблемой из-за того, как команда Facebook / RN создала FlatList. В отличие от TableView в iOS ничего не переработано. Все предметы оказываются одновременно.

Я также пробовал некоторые другие библиотеки, такие как https://github.com/Flipkart/recyclerlistview - хотя это улучшило начальную доступность прокрутки, при быстрой прокрутке вид сбрасывает много кадров и становится чрезвычайно медленным. После просмотра всех изображений прокрутка в порядке, но этого недостаточно.

Какие-нибудь решения для оптимизации UX этого вообще? У меня возникает искушение отказаться от RN и перейти на родной язык - это довольно простая функция ... представления списка!

1 Ответ

0 голосов
/ 29 января 2019

Вы пытались предварительно выбрать изображения согласно документам ? 

Image.prefetch(url);

Также React Native Fast Image очень хорошо подходит для большого количества файлов. Хотя он работает только с проектами, созданными с помощью react-native init или с извлеченным проектом Expo, поскольку для этого требуется связать собственный код.

При предварительной загрузке изображения производительность должна быть намного лучше.

...