Как правильно требовать изображения в ES6, React Native, CommonJS - PullRequest
Новая
       54

Как правильно требовать изображения в ES6, React Native, CommonJS

0 голосов
/ 26 декабря 2018

В моем приложении повсюду несколько изображений.Представьте себе аватар пользователя по умолчанию, например, значок кнопки и т. Д.

Я прочитал React Docs, но они не вдавались в подробности о лучшем подходе к require использованию изображений, которые часто используются.

https://facebook.github.io/react-native/docs/images

Мое приложение структурировано так 

...
./assets/images/like.png
./assets/images/default-avatar.png
./components/Newsfeed.js
./components/Home.js
...

Я использую require в теле функции render() примерно так,Но я заметил, что загрузка изображений заняла довольно много времени. 

render() {
  ...
  posts && posts.map(post => <Post likeUrl={require('../assets/images/like.png')}>)
  ...
}

Я экспериментировал, поэтому я переместил require наверх и затем рефакторинг в моих Newsfeed.js и Home.js.Действительно, при загрузке этих компонентов произошло заметное улучшение. 

...

const LIKE = require('../assets/images/like.png')

export class Newsfeed extends Component {
  render() {
    ...
    posts && posts.map(post => <Post likeUrl={LIKE}>)
    ...
  }
}

Я хочу знать, есть ли способ структурировать проект, чтобы мне не пришлось require в нескольких местах.

Бонусные баллы:

  1. Будет ли require один раз более производительным, как я подозреваю?Или я просто воображаю это.
  2. Если это так, что будет хорошим подходом для импорта этих изображений в централизованное место, их экспорта и импорта в другой файл для использования?

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Поскольку решение @Thinker, похоже, работает для вас, я просто добавлю другое решение.Я предлагаю вам уменьшить ресурсы изображений вашего проекта почти до 0. Всегда есть проблемы с импортом изображений.Они не только будут агрессивно увеличивать размер вашего git-репо, но также очень сложны в управлении CSS.Вы также не хотите требовать один и тот же файл для мобильных и настольных компьютеров.Кроме того, каждый раз, когда вы запрашиваете изображение, размещенное в том же домене, что и ваш код, вы также должны будете передавать файлы cookie, которые не являются оптимальными.Итак, давайте разберемся с проблемами, которые возникают при импорте изображений в код:

  1. Оптимизация для мобильных устройств и настольных систем - сложная задача (вам также необходимо иметь 1x, 2x и 3x)
  2. Те же файлы cookieи, возможно, кеширование настроек с помощью вашего хоста с кодом
  3. Значительно увеличивает объем вашего репо-кода

Я предлагаю использовать CDN, как только вы сможете его использовать.Alibaba OSS (Китай) предлагает очень дешевый, но качественный сервис.Вы можете использовать медиазапросы CSS для обработки разных размеров, устанавливая разные фоновые изображения.Alibaba также предоставляет вам эту замечательную функцию, которая вам нужна только для загрузки вашего 3х размера и получения 2х и 1х, передавая различные параметры запроса.Настройки кэша и все проблемы CDN также исправлены.Если вы не хотите ничего покупать, вы также можете сделать то же самое самостоятельно с меньшим количеством функций и большей головной болью, но я не рекомендую.

0 голосов
/ 26 декабря 2018

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

  1. Я создаю общий файл с именем 'image_container.js' и вносю изменения, как показано ниже:

export const Likes = require('./assets/images/like.png')
export const DefaultAvatar = require('./assets/images/default-avatar.png')
Я импортирую изображения из этого файла, чтобы использовать его. 

import { Likes, DefaultAvatar } from './image_container'

export class Newsfeed extends Component {
  render() {
      ...
      posts && posts.map(post => <Post likeUrl={Likes}>)
      ...
  }
}

Поступая так, я требую изображения один раз и использую их несколько раз в моем приложении.

Надеюсь, это поможет:)

...