Bagian 6 Navigation (Stack dan Tab Navigator)

Hallo sahabat Koding Indonesia, berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada pertemuan kali ini kita akan membahas tentang Navigasi. Pada tutorial ini kita akan menggunakan Library React Navigation kalian bisa pelajari juga dokumentasi dari react navigation disini.

Pada tutorial kali ini kita akan berkenalan dulu dan mempelajari antara lain :

1. Setup and Installation
2. Stack Navigator
3. Tab Navigator

Oke, agar tidak mengulur waktu mari kita langsung saja mulai.

Setup and Installation

jika kita mengikuti dokumentasi dari react navigation maka langkah-langkahnya adalah seperti berikut ini:

sedangkan saat mengikut perintah tersebut penulis mendapatkan sintaks error. Maka untuk alternatifnya kita akan menggunakan langkah-langkah lain, dengan cara berikut ini :

Pertama: Membuat Project Baru React Native

Pada langkah pertama ini pastinya kita harus membuat project baru, pada project kali ini kita akan membuat project dengan nama “Navigasi”.

Caranya:

Buka Terminal (Command Prompt)

Di terminal silahkan arahkan ke folder dimana kita akan menginstall projectnya.

Install project dengan menuliskan perintah berikut 

react-native init Navigasi

Lalu tunggu hingga proses installasi selesai.

Kedua : Install React Navigation

Setelah berhasil membuat project baru selanjutnya kita akan menginstall React Navigation.

Caranya :

Buka Terminal (Command Prompt)

Arahkan kefolder dimana kita menginstall Project kita tadi

Selanjutnya tuliskan perintah berikut :

npm i

Setelah itu tuliskan perintah berikut :

npm i react-navigation

Ketiga : Jalankan Program

Setelah membuat project dan memasang React Navigation maka langkah selanjutnya adalah menjalankan programnya untuk mengetahui berhasil atau tidak.

Caranya :

Buka terminal (Command Prompt)

Arahkan ke folder dimana kita menginstall project kita tadi

Setelah itu tuliskan perintah 

react-native run-android

Penting:
Pastikan emulator (Genymotion) atau yang lainnya telah berjalan, atau device Android kita telah terhubung

Jika aplikasi berhasil dijalankan maka kita telah berhasil memasang React Navigation.

Selanjutnya kita akan mencoba apakah React Navigationnya berfungsi dengan cara membuat Stack Navigation dan Tab Navigator.

Silahkan klik Next Step di bawah ini untuk melanjutkan belajar.