В React Native группирует ли все изображения в одном объекте плохую производительность? - PullRequest
Новая
       28

В React Native группирует ли все изображения в одном объекте плохую производительность?

1 голос
/ 04 октября 2019

У меня есть файл с длинным списком изображений, подобных этому 

const images = {
  cities: {
    amsterdam: require('../assets/images/amsterdam.jpg'),
    ashford: require('../assets/images/ashford.jpg'),
    avignon: require('../assets/images/avignon.jpg'),
    brussels: require('../assets/images/brussels.jpg'),
    ...
  },
};

export default images;

Затем я импортирую одно в свой компонент, как этот 

import images from './images';

const MyComp = () => (<Image source={images.city.amsterdam} />);

Мне было интересно, как будет обрабатываться React Nativerequire и если это повлияет на производительность в приложении?

Было бы более производительным использовать что-то подобное? 

const amsterdam = require('../assets/images/amsterdam.jpg')
const MyComp = () => (<Image source={amsterdam} />);

1 Ответ

0 голосов
/ 04 октября 2019

Я бы порекомендовал загружать изображения при необходимости (если у вас много изображений, как вы сказали), а не загружать (значит, требует) все изображения во время загрузки компонента.

Для этого сохранитеМассив или Объект с именами файлов (и путем). Если вы используете flatlist для управления своими изображениями, он выполняет большую часть работы за вас (загружая правильное изображение в нужное время) за вас, потому что вы можете настроить flatlist, сколько элементов (в дополнение к текущему, который вы видите на экране) будетзагружен.

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

Я получил хорошие результаты с этой стратегией. Вы также можете дать react-native-image-zoom-viewer или react-native-fast-image шанс.

...