Breaking News
Home / Bahasa Pemrograman / Ahmad Rosid – Berpindah Halaman Pada React Native

Ahmad Rosid – Berpindah Halaman Pada React Native

Kali ini kita akan coba bahas react-native yaitu tentang bagaimana berpindah dari satu halaman ke halaman yang lain. Dimana hal ini adalah salah satu yang wajib kita ketahui kalau kita ingin membuat sebuah aplikasi. Karna tidak mungkin kita membuat sebuah aplikasi yang hanya memiliki satu halaman, pasti kita memiliki banyak halaman. Nah kali ini kita akan coba bahas dasar berpindah halaman di aplikasi yang kita kembangkan pada React Native ini.

Buat Project Baru

Tanpa tunggu lama — lama mari kita segera membuat sebuah project baru untuk latihan kali ini. Jalankan perintah berikut ini :

Pada tutorial kali ini kita akan membuat aplikasi yang akan kita jalanka pada IOS.

Buat Halaman Home

Pertama mari kita buat sebuah halaman Home dimana disini kita akan buatkan sebuah button untuk nanti bisa di klik dan berpindah halaman. Silahkan buat seperti berikut ini :

 

Buat Halaman Detail

Sudah selesai membuat halaman home selanjutnya kita buat sebuah halaman lagi yang kita beri nama Detail.

 

Setting Halaman Utama

Nah pada file index.ios.js kita akan melakukan konfigurasi navigator yang dimana ini akan kita gunakan sebagai wadah dari setiap halaman — halaman yang telah kita buat sebelum nya.

 

Sekarang coba jalankan perintah berikut ini

Penjelasan

Dalam membuat aplikasi berpindah halaman ini untuk ios kita menggunakan sebuah wrapper NavigatorIOS, dimana NavigatorIOS ini di kembangkan di atas layer UINavigationController yang memungkinkan kita membuat navigation stack yang memiliki fungsi sama seperti UINavigationController.

Perhatikan kode berikut ini pada file index.ios.js:

Parameter initialRoute disini berfungsi untuk medefinisikan kontent yang akan di tampilkan pada sebuah halaman pada saat navigator ini di buat, tiga param di dalam nya ini required yaitu component, title, passProps.

Selanjutnya pada file Home.js pada folder app/component :

Disini pada button kita memberikan binding pada onPress yang kita arahkan kepada method _onPressDetail. Karna setiap component yang kita wrap pada NavigatorIOS ini telah di inject sebuah props yang kita bisa gunakan untuk melakukan mengkontrol sebuah navigator. Pada kasus ini kita melakukan push terhadap props navigator dimana ini adalah code yang berfungsi untuk berpindah halaman dari home menuju halaman detail.

Ok cukup sekian untuk tutorial kali ini kita lanjut di artikel berikutnya ya. Bagi yang memiliki pertanyaan silahkan hubungi saya di social media atau bisa email saya [email protected], dan bagi yang ingin source code nya silahkan buka llink di bawah ini.

About gookkis

Cuma tukang ketik di Gookkis.com, semoga tulisan jelek ini bermanfaat.

Baca Juga

ReactJS – Mengenal ReactJS

ReactJS adalah library Javascript yang digunakan untuk membantu mendeskripsikan view berdasarkan beberapa keadaan. Mudahnya library …

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.