Image
- React Native kursu
- Başlangıç
- Ders 65/116
- 4 dk
Image bileşeni ile görsel göstermeyi öğrenirsin.
Image bileşeni
Image bileşeni ekranda görsel gösterir. Bir fotoğraf, ikon ya da çizim için kullanılır. <Image /> etiketi tek başına yeterli değildir; source prop'una hangi görseli göstereceğini söylemen gerekir.
En basit biçimi: <Image source={'{ uri: 'https://.../logo.png' }'} />. Burada uri uzaktaki görselin adresidir. Yerel görsellerde require kullanılır; bunu bir sonraki derste göreceksin.
Image varsayılan olarak sabit boyut almaz. Genişlik ve yükseklik vermezsen görsel görünmez. Bu yüzden her zaman style ile width ve height ekle.
Image temel kullanım
Uzak bir görsel için source prop'una {`{ uri: '...' }`} verilir. uri büyük/küçük harfe duyarlıdır; küçük harfle yazılır.
Tam bir örnek: <Image source={'{ uri: 'https://example.com/cat.png' }'} style={'{ width: 200, height: 120 }'} />. Bu etiket 200x120 piksel bir kutuda kedi görselini gösterir.
İnternetten gelen görsellerde HTTPS kullanmak güvenlik açısından önemlidir. iOS, HTTP istekleri için info.plist ayarı ister; bu yüzden üretimde genelde HTTPS tercih edilir.
Uygulama Kedi görseli göster
200x140 boyutunda bir <Image> yaz. source olarak {`{ uri: 'https://example.com/cat.png' }`} ver. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { Image } from 'react-native';
// Image bileşenini buraya yazÖrnek çözüm
function App() {
return (
<Image
source={{ uri: 'https://example.com/cat.png' }}
style={{ width: 200, height: 140 }}
/>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Image'nin olmazsa olmazı nedir?
- Yalnızca arka plan rengi
- Yalnızca kenarlık
- Yalnızca metin
- source ve boyut Doğru cevap
Açıklama: source görseli, width ve height ise boyutu belirler.
2 Image içe aktar
import { View, ____ } from 'react-native';import { View, Image } from 'react-native';Açıklama: Image react-native paketinden içe aktarılır.
3 Image parçalarını eşle
| Kavram | Anlamı |
|---|---|
source |
Görsel adresini tutar |
uri |
Uzak görselin adresi |
width |
Görsel genişliği |
height |
Görsel yüksekliği |