source

source prop ile yerel ve uzak görseli öğrenirsin.

source: yerel ve uzak

source prop'u iki biçimde çalışır. Uzak görsellerde bir {`{ uri: '...' }`} nesnesi; yerel görsellerde ise require çağrısı kullanılır.

Yerel görsel için: source={'{ require('./assets/logo.png') }'}. Burada yol, projenin assets klasörüne göre verilir. Uzantı .png, .jpg ya da .webp olabilir.

Yerel görseller uygulamanın içine paketlenir; internet gerekmez ve daha hızlı yüklenir. Uzak görseller ise dinamik olarak değişebilir; örneğin sunucudan gelen ürün fotoğrafları.

Uzak görsel yüklemesi

Uzak görseller indirilirken boş bir kutu görünebilir. Bunun için loadingIndicatorSource ile bir yükleyici görseli gösterebilirsin; küçük bir spinner görseli iyi bir seçimdir.

Yüklemenin başarısız olma durumunda onError prop'u bir fonksiyon alır. Böylece hatayı yakalayıp yedek bir görsel gösterebilirsin.

Bu derste uzak görselin temel akışına odaklanıyoruz: uri vermek yeterli. Yedek görsel ve yükleyici desenleri ileri seviyede ayrıntılı işlenecek.

Uygulama Yerel logo göster

Bir <Image> yaz ve source prop'una require('./assets/logo.png') ver. style ile width: 100 ve height: 100 ekle. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  return (
    <Image
      source={require('./assets/logo.png')}
      style={{ width: 100, height: 100 }}
    />
  );
}
export default App;

Kendini test et

Yerel görsel kaynağı

import { Image } from 'react-native';

function App() {
  return (
    <Image source={____('./assets/logo.png')} style={{ width: 80, height: 80 }} />
  );
}

Cevabı göster

import { Image } from 'react-native';

function App() {
  return (
    <Image source={require('./assets/logo.png')} style={{ width: 80, height: 80 }} />
  );
}

Uzak görselde source ne alır?
- Bir sayı
- Yalnızca bir dize
- { uri: '...' } nesnesi
- Bir renk değeri
Cevabı göster

Bir sayı — uri anahtarıyla bir nesne verilir.
source türlerini eşle

require

Yerel görsel
uri

Uzak görsel adresi
loadingIndicatorSource

Yükleyici görseli
onError

Hata işleyici

Sıradaki ders: resizeMode

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler