การแสดงรูปภาพจากแหล่งข้อมูลภายในและระยะไกล

The Image Component Introduction

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()

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

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

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

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

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

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

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

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

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

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

Lesson Recap