Gambar mudah ditambahkan ke aplikasi React Native Anda. Dapatkan semua seluk beluk tentang komponen Gambar bawaan.

Gambar memberikan banyak nilai untuk aplikasi seluler. Mereka dapat membantu mengilustrasikan konsep, menyampaikan informasi, menciptakan minat visual, dan memberikan konteks untuk konten tertentu yang mungkin tidak boleh dilewatkan oleh pengguna aplikasi Anda.

Komponen React Native Image

Komponen gambar React Native adalah komponen default yang disediakan oleh pustaka React Native untuk merender gambar di aplikasi seluler Anda. Komponen dapat memuat gambar dari sumber lokal dan jarak jauh. Ini menyediakan beberapa alat peraga untuk penyesuaian dan penataan gambar yang dirender.

Untuk menggunakan komponen gambar di aplikasi Anda, impor Gambar dari reaksi-asli perpustakaan:

impor Reaksi dari'reaksi';
impor { Lembar Gaya, Gambar, Tampilan } dari'bereaksi-asli';
const Aplikasi = () => {
kembali (

 gaya={gaya.gambar}
 sumber={memerlukan('./assets/my-image.jpg')}
 />
 </View>
 );
};
const gaya = StyleSheet.create({


 wadah: {
 melenturkan: 1,
 menyelaraskanItem: 'tengah',
 membenarkanKonten: 'tengah',
 },
 gambar: {
 lebar: 200,
 tinggi: 200,
 perbatasanRadius: 100,
 },
});

Di atas adalah sederhana Aplikasi komponen dengan gambar. Itu Gambar komponen mengambil a gaya penyangga yang mengatur lebar, tinggi, Dan borderRadius dari gambar. Ini juga membutuhkan sumber prop yang memuat gambar dari file lokal yang terletak di folder "assets" di dalam direktori app. Itu sumber prop menentukan jalur gambar untuk disertakan dan dapat menerima sumber gambar lokal dan jaringan/jarak jauh.

Gambar lokal tersedia di perangkat pengguna dan Anda dapat menyimpannya untuk sementara atau secara permanen. Anda dapat menyimpan gambar lokal di dalam direktori proyek aplikasi, seperti aktiva map. Anda juga dapat menemukan gambar di luar direktori aplikasi, seperti di rol kamera perangkat atau pustaka foto. Berikut adalah contoh jalur sumber ke gambar lokal:

uri: 'file:///path/ke/my-image.jpg' }} />

Gambar jaringan dikirimkan melalui web. Mereka dapat menyertakan URL HTTP/HTTPS atau URI data yang disandikan base64, yang menyematkan data langsung ke URL menggunakan skema pengkodean Base64.

Props untuk Menyesuaikan Komponen Gambar

Ada beberapa properti yang dapat Anda gunakan untuk mendesain dan menyesuaikan komponen React Native Image.

resizeMode

Itu resizeMode prop menentukan bagaimana React harus mengubah ukuran dan memposisikan gambar di dalam wadahnya. Ada beberapa nilai yang tersedia untuk resizeMode, yang masing-masing akan memengaruhi gambar secara berbeda.

  • menutupi: Nilai ini akan menskalakan gambar secara seragam sehingga kedua dimensi sama atau lebih besar dari elemen yang memuatnya. Gambar kemudian dipusatkan di dalam wadah. Menggunakan nilai ini dapat mengakibatkan gambar terpotong untuk mempertahankan rasio aspek.
  • berisi: Ini akan mencoba menyesuaikan dan memusatkan gambar dengan sempurna dalam dimensi penampung. Namun, hal ini dapat mengakibatkan ruang kosong di sekitar tepi gambar.
  • menggeliat: The menggeliat nilai membentang gambar untuk mengisi seluruh wadah, terlepas dari rasio aspek. Terkadang menyebabkan gambar terdistorsi.
  • mengulang: Nilai ini mengulangi gambar baik secara horizontal maupun vertikal untuk mengisi seluruh wadah.
  • tengah: Ini akan memusatkan gambar di dalam elemen penampung tanpa menskalakannya.

onLoad

Ini adalah sebuah fungsi panggilan balik yang berjalan saat gambar selesai dimuat. Anda dapat menggunakannya untuk melakukan tindakan setelah gambar dimuat, seperti memperbarui status komponen atau menampilkan pesan kepada pengguna.

onError

Itu onError prop akan berjalan jika atau ketika gambar gagal dimuat. Ini memberikan cara untuk melakukan tindakan yang diperlukan jika ada kesalahan saat mencoba memuat gambar. Anda dapat menampilkan pesan kesalahan kepada pengguna atau mencoba memuat gambar lagi.

Sumber default

Prop ini menentukan image fallback untuk ditampilkan jika image utama gagal dimuat. Anda dapat menggunakannya untuk memberikan gambar default atau gambar placeholder saat gambar utama sedang dimuat.

Menangani Gambar Jarak Jauh Dari API

Anda mungkin perlu mendapatkan image untuk aplikasi Anda dari API atau server jarak jauh dan menampilkannya dalam aplikasi Anda. Anda dapat menggunakan React bawaan mengambil fungsi atau API meminta pustaka seperti Axios untuk tujuan ini.

Berikut adalah contoh cara mengambil dan menampilkan gambar dari API jarak jauh menggunakan mengambil fungsi:

const [imageUri, setImageUri] = useState(batal);
gunakanEfek(() => {
 mengambil(' https://example.com/api/images/1')
 .Kemudian(tanggapan => respon.json())
 .Kemudian(data => setImageUri (data.url))
 .menangkap(kesalahan =>menghibur.error (kesalahan));
}, []);
kembali (

 {imageUri? (
uri: imageUri }} />
 ): (
Memuat...</Text>
 )}
 </View>
);

Menjalankan kode ini dalam aplikasi Anda akan mengambil gambar dari tautan API jarak jauh yang disetel. Contoh pertama membuat variabel status untuk imageUri. Dalam a useEffect kait, itu mengambil fungsi mengambil imageUri dan menyimpannya dalam variabel status menggunakan setImageUri().

Akhirnya, itu membuat Gambar komponen dengan sumber prop disetel ke URI gambar sementara indikator pemuatan ditampilkan, menunggu gambar ditampilkan.

Menggunakan Prop Kebijakan Cache untuk Mengontrol Perilaku Cache

Browser Anda dapat meng-cache gambar yang dimuat dari URL jarak jauh, sehingga dapat memuatnya kembali dengan cepat di masa mendatang. Anda dapat menyesuaikan perilaku gambar yang di-cache menggunakan cache menopang. Prop ini dapat menentukan bagaimana browser harus meng-cache gambar dan bagaimana seharusnya membatalkan cache itu.

Prop cache dapat mengambil nilai seperti default, muat ulang, paksa-cache, Dan hanya-jika-cache.

Berikut adalah contoh cara menggunakan cache prop untuk mengontrol perilaku cache dari suatu gambar:

 sumber={{
 uri: ' https://example.com/images/my-image.png',
 cache: 'paksa-cache',
 cacheKey: 'gambar-saya',
 kekal: BENAR
 }}
/>

Itu cache properti diatur ke 'paksa-cache', yang menunjukkan bahwa browser harus memuat gambar dari cache jika tersedia, meskipun versi cache tersebut sudah lama.

Alat peraga baru cacheKey juga berperan di sini. Sudah diatur ke 'gambar-saya', yang akan berfungsi sebagai kunci cache khusus yang dapat Anda gunakan untuk mereferensikan gambar yang di-cache nanti.

Juga kekal properti diatur ke BENAR, yang memberi tahu browser untuk memperlakukan entri cache ini sebagai tidak dapat diubah dan tidak pernah membatalkannya.

Semua Ada Tentang Gambar

Komponen React Native Image menyediakan sarana yang kuat dan fleksibel untuk menampilkan gambar, termasuk gaya, penanganan gambar jarak jauh, dan mengontrol perilaku cache.

Untuk gambar jarak jauh, Anda selalu dapat menggunakan placeholder untuk menampilkan gambar atau teks sementara saat gambar jarak jauh dimuat. Ini akan menciptakan pengalaman pengguna yang lebih baik dengan memberikan umpan balik visual langsung dan mencegah aplikasi tampak tidak responsif.