Работа с изображениями

В React Native изображения отображаются с помощью компонента Image. Важной особенностью является то, что все изображения должны иметь явно заданные размеры — без указания width и height изображение не отобразится.

Локальные изображения

Для подключения изображений из папки проекта используется функция require(). Путь должен быть статическим — нельзя использовать переменные или шаблонные строки внутри require.

Пример:

<Image
  source={require('./assets/icon.png')}
  style={{ width: 48, height: 48 }}
/>

Особенности:

  • Файл должен существовать на момент сборки.
  • Поддерживаются форматы PNG, JPG, WebP (в зависимости от платформы).
  • Имя файла чувствительно к регистру.

Сетевые изображения

Для загрузки изображений из интернета используется объект с ключом uri:

<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 200 }}
/>

Особенности:

  • Не требуется указывать расширение.
  • Изображение загружается асинхронно — пока оно не загружено, ничего не отображается.
  • Можно добавить обработку ошибок через проп onError, но базовый Image не показывает placeholder по умолчанию.

Обязательные размеры

React Native не может определить размер изображения до его загрузки (особенно для сетевых), поэтому всегда нужно задавать width и height в стилях. Это касается как локальных, так и сетевых изображений.

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

Альтернативы для сложных случаев

Для продвинутых сценариев (например, автоматическое масштабирование, кэширование, placeholder) рекомендуется использовать сторонние библиотеки, такие как react-native-fast-image. Однако в рамках базового курса достаточно стандартного Image.

Пример: карточка с аватаром

<View style={{ flexDirection: 'row', padding: 12, alignItems: 'center' }}>
  <Image
    source={require('./assets/avatar.jpg')}
    style={{ width: 50, height: 50, borderRadius: 25 }}
  />
  <View style={{ marginLeft: 12 }}>
    <Text style={{ fontSize: 16 }}>Иван Петров</Text>
    <Text style={{ color: '#666' }}>Разработчик</Text>
  </View>
</View>

В этом примере аватар имеет фиксированный размер и скруглённые углы (borderRadius: 25 при размере 50×50 даёт круг).