source
- React Native kursu
- Başlangıç
- Ders 66/116
- 5 dk
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.
Başlangıç kodu
import { Image } from 'react-native';
// yerel logoyu buraya yazÖrnek çözüm
function App() {
return (
<Image
source={require('./assets/logo.png')}
style={{ width: 100, height: 100 }}
/>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yerel görsel kaynağı
import { Image } from 'react-native';
function App() {
return (
<Image source={____('./assets/logo.png')} style={{ width: 80, height: 80 }} />
);
}import { Image } from 'react-native';
function App() {
return (
<Image source={require('./assets/logo.png')} style={{ width: 80, height: 80 }} />
);
}Açıklama: require yerel görseli pakete dahil eder.
2 Uzak görselde source ne alır?
- Bir sayı Doğru cevap
- Yalnızca bir dize
- { uri: '...' } nesnesi
- Bir renk değeri
Açıklama: uri anahtarıyla bir nesne verilir.
3 source türlerini eşle
| Kavram | Anlamı |
|---|---|
require |
Yerel görsel |
uri |
Uzak görsel adresi |
loadingIndicatorSource |
Yükleyici görseli |
onError |
Hata işleyici |