Gambar adalah salah satu hal yang penting dalam sebuah aplikasi, dimana Assets gambar pada Mobile Application sangat peinting untuk memberikan informasi pada user pengguna aplikasi, jadi gambar yang enak dilihat user adalah hal yang sangat kritikal untuk di ketahui.

Pada React Native kita dapat menampikan gambar dari Internet maupun dari local assets, yang mana untuk menampilkan gambar juga memiliki properti tertentu, agar gambar terlihat lebih bagus dan sesuai dengan kebutuhan si users.

Tutorial Menampilkan Gambar React Native Yang Baik & Benar
Tutorial Menampilkan Gambar React Native Yang Baik & Benar


Pada Tutorial ini kita akan belajar bagaiman caranya, menampilkan gambar yang baik dan benar pada React Native. Berikut Tutorial Menampilkan Gambar React Native Yang Baik & Benar.

Tutorial Menampilkan Gambar React Native Yang Baik & Benar

Menampilkan Gambar Dari Local Assets Di React Native :

  • Pertaman buat sebuah project abru atau anda bisa menggunakan project yang sudah ada.
  • kemudian buat sebuah folder baru, disini saya membuat folder images  di root folder
  • Kemudian ketikan kode di bawah ini :

  • Kemudian Jalankan dan hasilnya akan seperti gambar di bawah ini :


Tutorial Menampilkan Gambar React Native Yang Baik & Benar
Tutorial Menampilkan Gambar React Native Yang Baik & Benar
Catatan: Apabila kamu menggunakan local image, kamu bisa menampilkan gambar tanpa mengatur properti width dan height
Menampilkan Gambar Dari Internet Di React Native :
Berikut Cara menampilkan gambar React Native dari Internet :
Kita menggunakan properti uri: yang di bungku dengan dua object ({{}})


 Maka Hasilnya Akan Seperti Gambar Di Bawah Ini:

Tutorial Menampilkan Gambar React Native Yang Baik & Benar


Menampilkan Gambar Dengan Properti React Native :
Properti stretch
stretch : berguna agar gambar menyesuaikan layar tanpa pengecualian:


Hasilnya seperti gambar di bawah ini:

Tutorial Menampilkan Gambar React Native Yang Baik & Benar



Properti center
center : berguna agar gambar berposisi di tengah tanpa pengecualian:

Properti contain
contain : berguna agar gambar selalu sesuai ukuran asilnya dan resize dengan ukuran aslinya:

Properti cover
cover : berguna agar gambar meng cover  view sesuai dengan ukuran image yang kamu tentukan:

Properti repeat
repeat : berguna agar gambar  mengulangi ukuran dari gambar yang kamu tentukan ukurannya:
Seperti gambar di bawah ini:
Tutorial Menampilkan Gambar React Native Yang Baik & Benar

Ok sekian semoga tutorial React Native ini dapat bermanfaat,

Baca Juga :
#1 Pengenelan React Native Dan Cara Instalasinya Lengkap
#2 Tutorial React Native State Dan Props Serta Penjelasannya