Я хочу управлять всеми статическими ресурсами в своем проекте React Native наилучшим и понятным способом.
Я использую компонент Image
, и все это для передачи локальной ссылки на изображение, как <Image source={imageReference}
/>, где imageReference
можно получить следующими двумя способами.
У меня есть это:
import mailIcon from '../../../assets/icons/mail.png';
import passwordIcon from '../../../assets/icons/password.png';
import mainLogo from '../../../assets/brand/main-logo.png';
, но также есть это:
index.js
в папке активов
export const brand = {
mainLogo: require('./brand/main-logo.png'),
logoHorBlanco: require('./brand/logo-hor-blanco.png'),
};
export const icons = {
checked: require('./icons/checked.png'),
unchecked: require('./icons/unchecked.png'),
};
SomeComponent.js
где-то
import { brand } from '../../assets';
Первый способ позволяет мне импортировать только те изображения, которые мне нужны, но трудно поддерживать пути.Второй способ экспортируется из папки assets
, поэтому, когда мне нужны изображения, я просто импортирую нужный объект и использую нужное изображение с brand.mainLogo
(например).
Так что я хочузнать:
- Если существуют различия в производительности между этими двумя опциями.
- При импорте, например, объекта
brand
, (каким-то образом) импортируются (или требуются)или кэшировал, или что-то) все изображения в этом объекте, o только то, что я называю с brand.mainLogo
.
Спасибо.