Görüntüleri React Native uygulamanıza eklemek kolaydır. Yerleşik Görüntü bileşenindeki tüm ayrıntıları alın.

Görüntüler, mobil uygulamalara çok fazla değer sağlar. Kavramları açıklamaya, bilgi iletmeye, görsel ilgi yaratmaya ve uygulama kullanıcılarınızın kaçırmasını istemeyeceğiniz belirli içerikler için bağlam sağlamaya yardımcı olabilirler.

React Yerel Görüntü Bileşeni

React Native görüntü bileşeni, mobil uygulamalarınızda görüntüleri işlemek için React Native kitaplığı tarafından sağlanan varsayılan bileşendir. Bileşen, görüntüleri hem yerel hem de uzak kaynaklardan yükleyebilir. Oluşturulan görüntülerin özelleştirilmesi ve stillendirilmesi için çeşitli aksesuarlar sağlar.

Görüntü bileşenini uygulamanızda kullanmak için içe aktarın resim dan tepki-yerli kütüphane:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { StyleSheet, Resim, Görünüm } itibaren"tepki-yerli";
sabit uygulama = () => {
geri dönmek (

 stil={stil.resim}
 kaynak={gerekmek('./assets/my-image.jpg')}
 />
 </View>
 );
};
sabit stiller = StyleSheet.create({





instagram viewer



 konteyner: {
 esnek: 1,
 Öğeleri hizala: 'merkez',
 İçeriği haklı çıkar: 'merkez',
 },
 resim: {
 Genişlik: 200,
 yükseklik: 200,
 kenarlık Yarıçapı: 100,
 },
});

Yukarıda basit bir Uygulama görüntü içeren bileşen. bu resim bileşen alır stil ayarlayan pervane Genişlik, yükseklik, Ve kenarlık Yarıçapı görüntü Ayrıca bir alır kaynak Görüntüyü, uygulama dizini içindeki "varlıklar" klasöründe bulunan yerel bir dosyadan yükleyen prop. bu kaynak prop, eklenecek görüntünün yolunu tanımlar ve hem yerel hem de ağ/uzak görüntü kaynaklarını kabul edebilir.

Yerel görüntüler, kullanıcının cihazında bulunur ve bunları geçici veya kalıcı olarak saklayabilirsiniz. Yerel görüntüleri uygulamanın proje dizini içinde saklayabilirsiniz; varlıklar dosya. Ayrıca, cihazın film rulosu veya fotoğraf kitaplığı gibi uygulama dizini dışındaki görüntüleri de bulabilirsiniz. Yerel bir görüntünün kaynak yoluna bir örnek:

uri: "file:///path/to/my-image.jpg" }} />

Ağ görüntüleri web üzerinden iletilir. Base64 kodlama şemasını kullanarak verileri doğrudan URL'ye gömen HTTP/HTTPS URL'lerini veya base64 ile kodlanmış veri URI'lerini içerebilirler.

Görüntü Bileşenini Özelleştirme Donanımları

React Native Image bileşenini biçimlendirmek ve özelleştirmek için kullanabileceğiniz birkaç donanım vardır.

yeniden boyutlandırma Modu

bu yeniden boyutlandırma Modu prop, React'in bir görüntüyü kapsayıcısında nasıl yeniden boyutlandırması ve konumlandırması gerektiğini belirler. için birkaç kullanılabilir değer vardır. yeniden boyutlandırma Modu, her biri görüntüyü farklı şekilde etkileyecektir.

  • kapak: Bu değer, her iki boyutun da onu içeren öğeye eşit veya ondan daha büyük olması için görüntüyü eşit şekilde ölçeklendirir. Görüntü daha sonra kapsayıcı içinde ortalanır. Bu değerin kullanılması, en boy oranını korumak için görüntünün kırpılmasına neden olabilir.
  • içermek: Bu, görüntüyü kabın boyutlarına mükemmel bir şekilde sığdırmaya ve ortalamaya çalışır. Ancak bu, görüntünün kenarlarında boş alan oluşmasına neden olabilir.
  • uzatmak: uzatmak değer, en boy oranından bağımsız olarak görüntüyü tüm kabı dolduracak şekilde uzatır. Bazen görüntünün bozulmasına neden olur.
  • tekrarlamak: Bu değer, tüm kabı doldurmak için görüntüyü hem yatay hem de dikey olarak tekrarlar.
  • merkez: Bu, görüntüyü ölçeklendirmeden kapsayıcı öğe içinde ortalar.

yükte

Bu bir geri arama işlevi görüntünün yüklenmesi bittiğinde çalışır. Görüntü yüklendikten sonra, bileşenin durumunu güncellemek veya kullanıcıya bir mesaj görüntülemek gibi eylemler gerçekleştirmek için kullanabilirsiniz.

onError

bu onError görüntü yüklenemezse veya başarısız olursa pervane çalışır. Resim yüklenmeye çalışılırken bir hata olması durumunda gerekli işlemlerin yapılması için bir yol sağlar. Kullanıcıya bir hata mesajı gösterebilir veya görüntüyü yeniden yüklemeyi deneyebilirsiniz.

varsayılanKaynak

Bu destek, ana görüntünün yüklenememesi durumunda görüntülenecek bir geri dönüş görüntüsünü belirtir. Ana görüntü yüklenirken varsayılan bir görüntü veya yer tutucu bir görüntü sağlamak için kullanabilirsiniz.

Bir API'den Uzak Görüntüleri İşleme

Uygulamanız için görüntüyü bir API'den veya uzak sunucudan almanız ve uygulamanız içinde görüntülemeniz gerekebilir. Yerleşik React'i kullanabilirsiniz gidip getirmek işlev veya bir Axios gibi API istekleri kitaplığı bu amaç için.

Uzak bir API'den bir görüntünün nasıl getirilip görüntüleneceğine ilişkin bir örneği burada bulabilirsiniz. gidip getirmek işlev:

sabit [imageUri, setImageUri] = useState(hükümsüz);
useEffect(() => {
 gidip getirmek(' https://example.com/api/images/1')
 .Daha sonra(cevap => yanıt.json())
 .Daha sonra(veri => setImageUri (veri.url))
 .yakalamak(hata =>konsol.hata (hata));
}, []);
geri dönmek (

 {imageUri? (
uri: imageUri }} />
 ): (
yükleniyor...</Text>
 )}
 </View>
);

Bu kodu uygulamanızda çalıştırmak, ayarlanan uzak API bağlantısından bir resim getirecektir. Örnek, ilk olarak, için bir durum değişkeni oluşturur. resimUri. İçinde useEffect kanca, gidip getirmek işlevi imageUri'yi alır ve bunu kullanarak durum değişkeninde saklar setImageUri().

Son olarak, resim ile bileşen kaynak prop, görüntünün URI'sine ayarlanırken, bir yükleme göstergesi görüntülenir ve görüntünün gösterilmesini bekler.

Önbellek Davranışını Kontrol Etmek İçin Önbellek Politikası Propunu Kullanma

Tarayıcınız, uzak URL'lerden yüklediği resimleri önbelleğe alabilir, böylece gelecekte bunları hızlı bir şekilde tekrar yükleyebilir. Önbelleğe alınan görüntünün davranışını kullanarak özelleştirebilirsiniz. önbellek pervane Bu pervane, bir tarayıcının görüntüyü nasıl önbelleğe alması gerektiğini ve bu önbelleği nasıl geçersiz kılacağını belirtebilir.

Önbellek pervanesi gibi değerler alabilir varsayılan, yeniden yükle, önbelleğe zorla, Ve sadece önbelleğe alınmışsa.

İşte nasıl kullanılacağına dair bir örnek önbellek bir görüntünün önbellek davranışını kontrol etmek için prop:

 kaynak={{
 uri: ' https://example.com/images/my-image.png',
 önbellek: "zorla önbelleğe alma",
 önbellekAnahtarı: 'benim görselim',
 değişmez: doğru
 }}
/>

bu önbellek özellik şu şekilde ayarlandı: "zorla önbelleğe alma", bu, önbellek sürümü eski olsa bile, varsa tarayıcının görüntüyü önbellekten yüklemesi gerektiğini belirtir.

yeni bir pervane önbellekAnahtarı burada da devreye giriyor. ayarlandı 'benim görselim', daha sonra önbelleğe alınan görüntüye başvurmak için kullanabileceğiniz özel bir önbellek anahtarı görevi görecek.

Ayrıca değişmez özellik şu şekilde ayarlandı: doğru, tarayıcıya bu önbellek girişini değişmez olarak ele almasını ve asla geçersiz kılmamasını söyler.

Görsellerle İlgili Her Şey

React Native Image bileşeni, stil verme, uzak görüntüleri işleme ve önbellek davranışını kontrol etme dahil olmak üzere görüntüleri görüntülemek için güçlü ve esnek bir yol sağlar.

Uzak görüntüler için, uzak görüntü yüklenirken geçici bir görüntü veya metin görüntülemek için her zaman bir yer tutucu kullanabilirsiniz. Bu, anında görsel geri bildirim sağlayarak ve uygulamanın yanıt vermiyor gibi görünmesini engelleyerek daha iyi bir kullanıcı deneyimi yaratacaktır.