Pada kali ini saya akan membahas tentang Nested
Navigator di React-Native. Jadi navigasi yang saya gunakan disini adalah tab
navigation, drawer navigation dan switch navigation. Jika anda belum mengerti
apa itu tab, drawer dan switch, anda bisa membuka dokumentasi react-navigation
untuk detailnya. Intinya tab navigation yaitu navigasi berbentuk tab yang
mungkin berada dibawah atau diatas layar, drawer navigation yaitu panel navigasi
yang berada pada samping layar dapat menggunakan swipe ataupun tombol untuk
membukanya, dan switch navigation yaitu navigasi yang yang dapat
digunakan untuk berpindah pindah layar tanpa harus menggunakan tab atau drawer.
Langsung saja kita aplikasikan react-navigation.
Langkah yang harus dilakukan yaitu :
- Install react-navigation dengan cara ketik npm install --save react-navigation pada cmd di folder project anda.
- Setelah install selesai, buka project react native anda.
- Edit
code untuk menggunakan react-navigation. Hal pertama yang anda harus tambahkan
pada code adalah import react-navigation terlebih dahulu. Misal, jika anda
ingin menggunakan drawer navigation anda dapat mengetikkan import {
createDrawerNavigation } from “react-navigation”. Contoh disini saya
menggunakan ketiganya sekaligus.
- Setelah
import dilakukan, gunakan apa yang telah diimport sebelumnya. Saya disini
menerapkan nested navigation, maksudnya yaitu navigasi satu berada pada
navigasi yang lain. Dibawah ini adalah contoh yang saya buat. Saya mengasumsikan
anda telah membuat layar / screen yang akan digunakan untuk navigation.
- Setelah anda membuat seperti apa yang ada diatas, navigation akan muncul pada layar yang diinginkan.
Tidak ada komentar:
Posting Komentar
jangan comment dengan kata kotor dan mengandung unsur yang tidak baik...comment dengan kata yang tidak menyinggung siapapun dan tidak merugikan orang lain... selamat berkomentar..!! :)