Assalamu'alaikum wr wb.
Disini saya Maulana Akbar Kusuma akan menyelesaikan tugas untuk memenuhi tugas Mobile.
Jadi disini saya akan melakukan bagaimana cara untuk menambahkan custom navbar dan juga mengedit header.
Langkah pertama persiapkan terlebih dahulu gambar untuk navbarnya disini saya sudah menyiapkannya, dengan format svg. Kenapa format svg? karena kalo pake svg nanti warna nya bisa diubah sesuai dengan keinginan kita, jika menggunakan format png tidak bisa.
Setelah gambar telah tersedia, pindahkan direktori E:\Laundry\aplikasi\antarLaundry\src\assets\icons selebihnya buat terlebih dahulu folder icons.
Bisa dilihat diatas ada dua yang biasa dan juga active, yang active itu warnanya beda jika nanti pas di klik.
Setelah itu buat file index.js di folder icons
Fungsi file index.js di folder icons ini untuk mengimport gambar yang sudah kita sisipkan sebelumnya.
Setelah itu kita buat folder src/components/BottomNavigator lalu buat file index.js difolder tersebut dan masukan codingan seperti berikut
Setelah itu kita buat lagi folder src/components/TabItem dan juga buat file index.js lalu masukan codingan seperti berikut ini
nanti hasil akhirnya akan seperti ini
Setelah beres dengan icon navbar kita akan langsung membuat header. Seperti biasa siapkan terlebih dahulu gambarnya dan masukan ke folder src/assets/images
setelah itu masukan codingan seperti berikut
Yang pertama itu untuk mengimport gambar header dan juga untuk mengimport logo dan yang kedua untuk menampilkan gambar dan teks fungsi dari "styles" adalah untuk menambahkan variabel jika nantinya akan di edit.
Dan ini hasil dari header yang telah dibuat.
Selanjutnya kita akan membuat splashscreen. Splashscreen adalah tampilan awal ketika aplikasi akan dibuka atau biasa kita sebut loading awal aplikasi jika dibuka
Seperti biasa masuk kan gambar nya terlebih dahulu di src/assets/images
Setelah itu masukan codingan seperti berikut di src/pages/splash/index.js
Belum ada tanggapan untuk "Tutorial React Native (Custom Navbar , Header & SplashScreen)"
Post a Comment