Now Reading:

Bagian 6.1 React Native – Drawer Navigator Stack & Tab Navigator Inside

Bagian 6.1 React Native – Drawer Navigator Stack & Tab Navigator Inside

Hallo sahabat Koding Indonesia. Berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada pertemuan kali ini kita akan membahas lanjutan dari materi Navigasi. Pada tutorial ini kita tetap menggunakan library React Navigation.

Yang akan kita pelajari pada tutorial ini adalah:

– Jawaban dari test kemarin (menggabungkan Stack Navigation dengan Tab Navigation)

– Drawer Navigator

– Stack & Tab Navigator Inside Drawer Navigator

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

Pertama: Membuka project React Native sebelumnya

Pada langkah pertama ini kita tidak akan membuat project baru melainkan menggunakan project yang sudah ada sebelumnya yaitu project “Navigasi”. Bagi yang belum mengikuti bisa diikuti disini.

Silahkan buka project sebelumnya di text editor dan selanjutnya coba jalankan projectnya dengan perintah seperti biasa:

Jika project masih berjalan atau berfungsi maka kita akan membuat program yang pertama yaitu (Menggabungkan Stack Navigation dengan Tab Navigation), program ini merupakan program dari jawaban test kecil-kecilan yang kita lakukan pada tutorial Navigasi yang pertama bagi yang mengikuti.

Stack Navigator Inside Tab Navigator

Sekarang kita akan mencoba membuat sebuah tab navigator yang di dalamnya terdapat Stack Navigator.

Caranya :

Pertama silahkan tuliskan kode program berikut pada file App.js :

Setelah itu jalankan programnya, maka akan menjadi seperti ini :

        

Selanjutnya klik Next Step di bawah, kita akan membuat Aplikasi Drawer Navigator.

Konten developer untuk Mobile Development yang sangat mencintai mobile programming
Share This Articles