React Native Navigation

Aldinofrizal
Nov 4 · 2 min read

Navigasi pada react native dapat dilakukan dengan menggunakan package react navigation , petunjuk instalasi dapat dibaca pada dokumentasi package tersebut

Tab Navigation

untuk menggunakan tab navigation, kita perlu package tambahan yaitu

react-navigation-tabs

berikut adalah contoh penulisan code untuk membuat tab navigation sederhana

Tab Navigation

dengan StackNav dan Collection adalah komponen yang akan dirender jika navigasi dijalankan.

Deklarasi TabNavigator menggunakan method/function bawaan dari react-navigation-tabs, dengan parameter berupa object yang berisikan key-value, key merupakan nama halaman, dan value merupakan komponen yang akan dirender.

DefaultNavigationOptions merupakan opsi untuk memberi pengaturan pada tab navigation yang ada. Contoh diatas merupakan kostumisasi untuk menambahkan icon dari fontAwesome pada tiap-tiap link nya.

Stack Navigation

Berbeda dengan tab navigation, stack navigation bersifat menyimpan data history dari routing kita. Sehingga kita dapat melakukan routing/navigasi ke halaman sebelum nya. Sejati nya pembuatan Stack Navigation tidak berbeda jauh dengan tab navigation,

Package tambahan yang diperlukan untuk membuat stack navigation adalah react-navigation-stack

berikut adalah contoh penulisan code untuk membuat stack navigation

Stack Navigation

Sama seperti dengan tab navigation, untuk membuat stack navigation, digunakan method/function bawaan dari package react-navigation-stack.

Pada contoh diatas method/function ini menerima dua paramter, yaitu RouteConfig yange berisi data link-link yang akan dimasukan dan component yang akan dirender. Sedangkan parameter kedua yaitu StackNavigatorConfig, berisikan opsi pengaturan seperti warna, styling text, dan ukuran.

dokumentasi resmi dari package yang digunakan diatas dapat diakses pada link dibawah:

react-navigation

react native

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade