Tutorial React Native (Setting Navigation) Lanjutan

Assalamu'alakum wr wb.

Disini saya Maulana Akbar Kusuma akan menyelesaikan tugas untuk memenuhi tugas Mobile.

Jadi disini saya akan melanjutkan progress yang sebelumnya, disini saya akan mengedit dan juga menambahkan navigation bar.. untuk proses lebih lanjutnya silahkan buka terlebih dahulu file yang telah di buat di vscode....

Sebelum lanjut untuk pengcodingan terlebih dahulu kita install ektension ES7 React Native yang ada di vscode untuk memudahkan pada saat pengkodingan nanti

Setelah terinstall kita bisa melanjutkan ke pengkodingan. Disini saya mendapatkan kodingan dari site reactnative itu sendiri React Native Navigation

Terlebih dahulu kita membuat folder src

Lalu didalam folder src kita buat lagi beberapa folder 

Lalu pindahkan file app.js ke folder src

Karena akan mengalami error di emulator nya maka kita edit terlebih dahulu index.js nya.. dengan menambahkan src

lalu kembali lagi ke file app.js .. disitu kita hapus semua kodingannya untuk mengganti ke kodingan yang akan kita perlukan

lalu ketikan rnfes dan tekan enter 

maka akan muncul kodingan baru seperti ini

Lalu disini saya akan tes dengan memunculkan hello world 

Maka hasilnya akan seperti ini 

Dikarenakan yang waktu itu sempat mengalami error, jadi belum selesai sampe coding navigationnya.. jadi sekarang saya akan melanjutkan progressnya

Langsung saja ke proses pembuatannya.. disini saya membuat beberapa folder di

src/pages/.. disitu saya membuat folder untuk halaman seperti ini

Setelah membuat folder tersebut, di tiap tiap folder barunya kita bikin file dengan nama index.js 

Lalu di index,js nya tersebut kita ketikan rnfes untuk menginisialisasi saja terlebih dahulu 

Lakukan hal yang sama di index.js di folder yang lainnya..

Jika sudah selesai kita buka lagi file app.js 

Jangan lupa import router dikarenakan kodingannya tersimpan di folder router

Lalu kita file index.js yang ada di folder router, untuk memasukkan beberapa kodingan

Jangan lupa import terlebih dahulu stack sama bottom navigatornya.. dan jangan lupa import juga beberapa file yang akan di hubungkan ke router 

lalu masukan kodingan untuk bottom navigatornya, karena disini saya punya dua halaman jadi saya membuat tiga navigator

Disitu saya buat halaman Home, Pesanan dan Akun..

Lalu saya juga buat untuk splash screen nya juga, splash screen disini untuk tampilan awal ketika aplikasi dibuka

Tapi dikarenakan splash nya belum saya tambahin gambar, jadi initialRouteName nya saya isi MainApp atau menu utama nya..

Tampilan di aplikasi nya seperti dibawah ini

Beranda

Pesanan

Akun

Jadi ketika di klik berpindah ke halaman yang dituju.

Mungkin sekian progress lanjutannya nya dikarenakan saya masih menemukan banyak kendala error.. 

Sekian terima kasih...

Wassamualaikum  wr. wb

Tweet

Postingan terkait:

Ditulis Maulana Akbar — Wednesday, October 21, 2020 — Add Comment — Knowledge, Tutorial