React Native Academy · Урок

Отображение изображений из локальных и удалённых источников

Загружайте изображения из папки ресурсов и по удалённым URL с помощью компонента Image, задавайте resizeMode и отображайте заполнители во время загрузки.

«Отображение изображений из локальных и удалённых источников» — бесплатный урок React Native Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Native Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Native Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

The Image Component Introduction

The Image component shows photos, icons, and art. Just remember to give it a width and height — without a size it renders as an invisible empty box.

import { Image, View, StyleSheet } from 'react-native';

export default function SimpleImage() {
  return (
    <View style={{ padding: 16 }}>
      <Image
        source={{ uri: 'https://picsum.photos/200/200' }}
        style={styles.image}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
  },
});

Loading Local Images with require()

Show an image from your assets with require() and a fixed path. It gets bundled into your app at build time, so it loads instantly and works offline.

import { Image, StyleSheet } from 'react-native';

export default function LocalImage() {
  return (
    <Image
      source={require('./assets/icon.png')}
      style={styles.logo}
    />
  );
}

const styles = StyleSheet.create({
  logo: {
    width: 100,
    height: 100,
  },
});

// You can also provide @2x and @3x variants:
// assets/icon.png
// assets/icon@2x.png  ← used on 2× screens
// assets/icon@3x.png  ← used on 3× screens

Loading Remote Images from URLs

For an online image, pass a uri object to source. React Native fetches and caches it, but you still set a size, since it cannot know the dimensions yet.

import { Image, StyleSheet } from 'react-native';

export default function RemoteImage() {
  const imageUri = 'https://picsum.photos/seed/react-native/300/200';

  return (
    <Image
      source={{ uri: imageUri }}
      style={styles.photo}
    />
  );
}

const styles = StyleSheet.create({
  photo: {
    width: '100%',   // fill container width
    height: 200,     // fixed height
    borderRadius: 12,
  },
});

resizeMode: Fitting Images in Containers

The resizeMode prop fits an image to its box: "cover" fills and crops, while "contain" shows the whole thing. Use cover for photos, contain for logos.

import { Image, View, Text, StyleSheet } from 'react-native';

export default function ResizeModes() {
  const uri = 'https://picsum.photos/400/300';
  const box = { width: 150, height: 100, borderWidth: 1, borderColor: '#ccc' };

  return (
    <View style={{ flexDirection: 'row', gap: 8, padding: 16 }}>
      <View>
        <Image source={{ uri }} style={[box, { resizeMode: 'cover' }]} />
        <Text>cover</Text>
      </View>
      <View>
        <Image source={{ uri }} style={[box, { resizeMode: 'contain' }]} />
        <Text>contain</Text>
      </View>
    </View>
  );
}

Loading Placeholders and defaultSource

Online images take a moment, so show a placeholder while you wait. Track a loading state and swap in a spinner until the image loads.

import { Image, View, ActivityIndicator, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function ImageWithLoader() {
  const [loading, setLoading] = useState(true);

  return (
    <View style={styles.container}>
      {loading && (
        <ActivityIndicator
          style={StyleSheet.absoluteFill}
          size='large'
          color='#999'
        />
      )}
      <Image
        source={{ uri: 'https://picsum.photos/300/200' }}
        style={styles.image}
        onLoad={() => setLoading(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 300, height: 200, backgroundColor: '#f0f0f0', borderRadius: 12 },
  image: { width: 300, height: 200, borderRadius: 12 },
});

onLoad, onError, and onLoadStart

Image gives you callbacks: onLoadStart, onLoad, and onError. Use onError to show a fallback when a URL is wrong or the network drops.

import { Image, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function RobustImage({ uri, fallback }) {
  const [failed, setFailed] = useState(false);

  if (failed) {
    return (
      <View style={styles.fallback}>
        <Text style={{ color: '#999' }}>Image unavailable</Text>
      </View>
    );
  }

  return (
    <Image
      source={{ uri: failed ? null : uri }}
      defaultSource={fallback}
      style={styles.img}
      onError={(e) => {
        console.warn('Image failed:', e.nativeEvent.error);
        setFailed(true);
      }}
    />
  );
}

const styles = StyleSheet.create({
  img: { width: 200, height: 200, borderRadius: 8 },
  fallback: { width: 200, height: 200, backgroundColor: '#eee', alignItems: 'center', justifyContent: 'center', borderRadius: 8 },
});

expo-image for Better Performance

For lots of images, try expo-image — a drop-in replacement with better caching, blurhash placeholders, and far less stutter in long lists.

import { Image } from 'expo-image';

// Install: npx expo install expo-image

export default function ExpoImageExample() {
  return (
    <Image
      source='https://picsum.photos/300/200'
      placeholder='LGF5]+Yk^6#M@-5c,1J5@[or[Q6.'
      contentFit='cover'
      transition={300}
      style={{ width: 300, height: 200, borderRadius: 12 }}
    />
  );
}
// placeholder is a blurhash string — generates a blurry
// color-correct placeholder before the real image loads.

Circular Images and Avatar Patterns

Round avatar? Wrap an Image in a square View, set borderRadius to half its width, and add overflow: hidden to clip it into a perfect circle.

import { Image, View, StyleSheet } from 'react-native';

export default function Avatar({ uri, size = 60 }) {
  const radius = size / 2;
  return (
    <View style={[
      styles.container,
      { width: size, height: size, borderRadius: radius }
    ]}>
      <Image
        source={{ uri }}
        style={{ width: size, height: size }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e0e0e0', // placeholder while loading
  },
});

Providing Headers for Protected Images

Some images need a login token. Pass headers in the source object and React Native sends them with the request. Never hardcode secrets — read them at runtime.

import { Image } from 'react-native';

export default function ProtectedImage({ token }) {
  return (
    <Image
      source={{
        uri: 'https://api.myapp.com/user/avatar',
        headers: {
          Authorization: 'Bearer ' + token,
          'Cache-Control': 'no-cache',
        },
        // Optional: cache policy
        cache: 'reload',
      }}
      style={{ width: 80, height: 80, borderRadius: 40 }}
    />
  );
}

ImageBackground for Overlaid Content

Want content on top of a photo? ImageBackground works like a View with an image behind it. Give it a size and place children right over the picture.

import { ImageBackground, View, Text, StyleSheet } from 'react-native';

export default function HeroSection() {
  return (
    <ImageBackground
      source={{ uri: 'https://picsum.photos/400/300' }}
      style={styles.hero}
      imageStyle={{ borderRadius: 16 }}
    >
      {/* Content rendered on top of the image */}
      <View style={styles.overlay}>
        <Text style={styles.title}>Discover React Native</Text>
        <Text style={styles.subtitle}>Build mobile apps today</Text>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  hero: { width: '100%', height: 220, justifyContent: 'flex-end' },
  overlay: { backgroundColor: 'rgba(0,0,0,0.45)', padding: 16, borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
  title: { color: '#fff', fontSize: 22, fontWeight: 'bold' },
  subtitle: { color: '#ddd', fontSize: 14 },
});

Image Caching and Performance Tips

For smooth scrolling lists, keep image URLs stable, lean on expo-image caching, and prefetch key images before they appear. Goodbye, flicker.

import { Image } from 'react-native';
import { useEffect } from 'react';

// Pre-fetch images before they're needed
function usePrefetchImages(urls) {
  useEffect(() => {
    urls.forEach(url => {
      Image.prefetch(url).catch(() => {
        // ignore prefetch errors
      });
    });
  }, [urls]);
}

// Usage:
const imageUrls = [
  'https://example.com/photo1.jpg',
  'https://example.com/photo2.jpg',
];
usePrefetchImages(imageUrls);

Quick Check

Quick check! See how the Image pieces clicked. 📸

Lesson Recap

Well done! require() loads local images, a uri object loads remote ones, and resizeMode: "cover" fills a box. Next up: building a profile card.

Часто задаваемые вопросы

Урок «Отображение изображений из локальных и удалённых источников» бесплатный?

Да — полный текст урока «Отображение изображений из локальных и удалённых источников» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Native Academy, подпишись на CoddyKit PRO. Курс React Native Academy содержит 4 уроков всего.

Чему я научусь в уроке «Отображение изображений из локальных и удалённых источников»?

Загружайте изображения из папки ресурсов и по удалённым URL с помощью компонента Image, задавайте resizeMode и отображайте заполнители во время загрузки. Ты практикуешь React Native Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Native Academy?

Предыдущий опыт не требуется. React Native Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Отображение изображений из локальных и удалённых источников»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Native Academy?

Да. Каждый урок React Native Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Компонент View как контейнер
Отображение текста и настройка шрифтов
Отображение изображений из локальных и удалённых источников
Создание простой карточки профиля

← Назад к React Native Academy