Зображення
У React Native є можливість використовувати зображення як:
Контентні зображення
Для розміщення у застосунку зображення використовуємо базовий компонент <Image /> і проп sourse, в якому вказуємо посилання на зображення.
Локальні зображення
Для імпорту зображення в компонент використовуємо require/import.
<Image source={require('./my-image.png')} />Або імпортуємо згори файлу компонента і звертаємося в потрібному місці програми.
import MyImage from './my-image.png'
<Image source={MyImage}/>Мережеві зображення
Для підверстання мережевого зображення використовують обʼєкт із властивістю uri. Для нелокальних зображень з мережі обовʼязково потрібно вказувати розміри.
// Добре
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
style={{width: 400, height: 400}} />
// Погано
<Image source={{uri: 'https://reactjs.org/logo-og.png'}} />Фонові зображення
Для застосування фонового зображення використовують базовий компонент <ImageBackground /> і пропси sourse, style та resizeMode. Весь контент при цьому вкладається всередину цього компоненту.
<ImageBackground
source={...}
style={{width: '100%', height: '100%'}}
resizeMode="cover"
>
<Text>Inside</Text>
</ImageBackground>Користуйтеся паттерном, що зазначений вище.
Але, щоб зрозуміти як цей компонент працює, можна звернутися до його коду в бібліотеці React Native. Розберемо його.
ImageBackground - це компонент який за допомогою position: 'absolute' розтягнуто всередині компонента View. Цей компонент має проп source (аналогічний, як і в Image), у якому вказують адресу зображення. Стилі для зображення додають через проп imageStyle, а для View - через звичайний проп style. Детальніше дивіться у документації. Код в бібліотеці React Native:
return (
<View
accessibilityIgnoresInvertColors={true}
importantForAccessibility={importantForAccessibility}
style={style}
ref={this._captureRef}>
<Image
{...props}
importantForAccessibility={importantForAccessibility}
style={[
StyleSheet.absoluteFill,
{
width: flattenedStyle?.width,
height: flattenedStyle?.height,
},
imageStyle,
]}
ref={imageRef}
/>
{children}
</View>
);Завантаження зображень за щільністю пікселів
Припустимо ми маємо таку структуру розміщення кнопки та зображення для неї (міститься всередині кнопки).
.
├── button.js
└── img
├── check.png
├── check@2x.png
└── check@3x.png<Image source={require('./img/check.png')} />В такому разі, підвантажиться найкраще по якості зображення для пристрою на якому відкриється застосунок. Наприклад, check@2x.png використовуватиметься на iPhone 7, а check@3x.png — на iPhone 7 Plus або Nexus 5.
Завантаження зображення за умовою
При завантаженні зображення за умовою, повну адресу на зображення треба спочатку винести в змінну і потім робити require. І в жодному разі не використовувати конкатенацію всередині require.
// Добре
<Image source={require('./my-icon.png')} />;
// Погано
const icon = this.props.active
? 'my-icon-active'
: 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;
// Добре
const icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;Посилання на офіційну документацію:
Last updated