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 :
- Setup and Installation
- Stack Navigator
- 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.
