Зображення

У 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
    ├── [e-mail]
    └── [e-mail]

<Image source={require('./img/check.png')} />

В такому разі, підвантажиться найкраще по якості зображення для пристрою на якому відкриється застосунок. Наприклад, [e-mail] використовуватиметься на iPhone 7, а [e-mail] — на 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} />;

Посилання на офіційну документацію:

Зображення

Image

ImageBackground

Image Style Prop