Cara Layouting Dengan React Native

Layouting merupakan sebuah proses untuk menciptakan tampilan yang akan menjadi sajian dari sistem atau aplikasi yang akan dibangun. Jadi, untuk menciptakan layout yang baik harus didasarkan pada konsep UI/UX yang telah disediakan sebelumnya sehingga proses layouting tidak memakan waktu yang lama.

Namun, terkadang kendala yang muncul saat melakukan layouting yaitu kita bingung saat ingin meletakkan komponen dan posisi komponen yang tepat karena kurangnya pemahaman terhadap source kode yang akan diletakkan di dalam proses pembuatannya.

Kali ini, saya sedikit share. Bagaimana membuat layout halaman login di React Native, silahkan ditambahkan jika ada kekurangan. Atau disesuaikan dengan project teman-teman sendiri.

Jadi, karena disini menggunakan react native. Proses pembuatan tampilan aplikasi hampir sama dengan kita membuat tampilan halaman WEB. Dimana tag <div> memiliki fungsi yang sama dengan <View>, Tinggal kita atur bagaimana membaginya dalam kolom dan baris untuk atributnya atau dalam WEB biasa disebut CSS.

Nah, jadi berikut contoh tampilan atau UI yang akan kita coba buat.
Sedikit penjelasan, kalau disini ada 6 komponen utama view.
1. Logo
2. Ucapan selamat datang
3. Inputan atau textbox
4. Button Login
5. Tulisan buat Akun
6. Footer

Source kodenya silahkan perhatikan dibawah ini:

Jadi, Hampir sama dalam pembuatan WEB dimana fungsi digunakan untuk membagi layout halaman yang akan dibuat. Itu aja sedikit share. Jika ada yang kurang jelas silahkan ditanyakan dikolom komentar.

Muhammad Noviyanto

Alumni Teknik Informatika, Universitas Islam Negeri Alauddin Makassar, Angkatan 2013.

Subscribe to receive free email updates: