[Week 11] Navigasi dengan React Navigation!

Halo semuanya, pada kesempatan kali ini akan dibahas sebuah package bernama react-navigation. Package ini sangat useful untuk membantu navigasi antar halaman pada aplikasi React Native. Sebenarnya, react-navigation memiliki berbagai macam navigator yang dapat diimplementasikan serta dikombinasikan. Namun, untuk post kali ini akan membahas StackNavigator, sebuah navigator bawaan dari react-navigation yang berfungsi untuk berpindah-pindah halaman dengan menumpuk halaman di atas halaman lainnya (seperti konsep pada stack).

1

Sebelumnya, pastikan bahwa package react-navigation telah ter-install dengan baik pada proyek React Native.

yarn add react-navigation

# or with npm

# npm install — save react-navigation

Setelah package terinstall dengan baik, dapat dilakukan modifikasi pada file App.js, sehingga navigasi antar class Home dan class Details dapat diimplementasikan.

2

StackNavigator merupakan sebuah fungsi yang memiliki kembalian sebuah komponen React. Oleh karena itu, StackNavigator dapat di-export secara langsung ke file App.js. Bahkan, dapat dijadikan sebagai root component file terkait. Hal pertama yang harus dilakukan adalah meng-import StackNavigator terlebih dahulu.

import { StackNavigator } from ‘react-navigation’;

Setelah itu, lakukan konfigurasi route yang merepresentasikan komponen-komponen yang ada. Pada kali ini, terdapat dua route yang didefenisikan. Route pertama adalah Home yang merepresentasikan komponen pada HomeScreen. Selain itu, terdapat route Details yang merepresentasikan komponen pada DetailsScreen. Selain itu, juga ditetapkan route Home sebagai route awal pada stack ini.

Lalu, kita dapat melakukan export komponen dari file App.js. Perlu diperhatikan bahwa komponen yang di-export dari App.js merupakan root component, sehingga sangat penting untuk memiliki kontrol terhadap komponen tersebut. Oleh karena itu, export yang dilakukan hanyalah render StackNavigator yang telah dibuat.

3

Setelah mendefinisikan route yang dibutuhkan, aplikasi masih membutuhkan suatu command line yang berfungsi untuk melakukan navigasi antar route tersebut. Pada web, seringkali ditulis seperti berikut.

<a href=”details.html”>Navigate to details page.</a>

Namun, pada StackNavigator digunakan prop navigation yang di-passing dari satu komponen ke komponen lainnya. Pada kali ini, kita menggunakan button tambahan pada HomeScreen untuk berpindah ke halaman DetailsScreen.

Secara umum, yang dilakukan oleh code di atas adalah memanggil fungsi navigate (dari prop navigation), dengan parameter berisi nama dari route yang dituju. Dengan begini, kita sudah berhasil melakukan navigasi dari HomeScreen ke DetailsScreen.

4

Pada StackNavigator, apabila “stack”terdiri dari lebih dari satu halaman, maka halaman yang merupakan tumpukan teratas akan memiliki header yang terdapat button Back di dalamnya. Dalam kasus ini, halaman DetailsScreen memiliki header tersebut. Sehingga, secara otomatis DetailsScreen dapat kembali ke halaman HomeScreen dengan menggunakan button Back.

Walaupun begitu, dapat juga digunakan this.props.navigation.goBack( ); untuk kembali ke halaman sebelumnya secara manual. Contohnya, dapat diaplikasikan pada sebuah button seperti kode berikut.

Dengan menggabungkan beberapa langkah di atas, dapat dilakukan navigasi simpel antara 2 halaman (HomeScreen dan DetailsScreen). Untuk referensi lebih lanjut, silakan melihat dokumentasi package react-navigation pada link berikut. Selain itu, kelompok PPL-A8 juga telah melakukan implementasi untuk berpindah halaman beserta passing parameter dari Products.js ke ProductDetails.js. Untuk melihat hasil kerja tersebut, dapat dilihat pada repositori PPL-A8.