Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Layout umum React Native App: Laman Kalendar

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Common React Native App Layouts.
Common React Native App Layouts: Gallery Page

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Di seri ini, kamu akan belajar cara menggunakan React Native untuk membuat laman yang biasanya digunakan di aplikasi ponsel. Layout yang akan kamu buat tidak terlalu fungsional-tapi, fokus dari seri ini adalah membuay kamu terbiasa dengan layout konten di React Native app.

Jika kamu baru dalam melayout aplikasi React Native atau memberi gaya secara umum, cek tutorial sebelumnya:

Untuk mengikuti seri ini, saya menantang kamu untuk kembali membuat setiap layar olehmu sendiri, sebelum membaca petunjuk langkah demi langkah di sini. Kamu tidak akan mendapatkan banyak keuntungan hanya dengan membacanya! Pertama coba untuk melihat jawabannya di sini. Jika kmau sukses membuatnya terlihat seperti layar original, bandingkan implementasimu dengan milik saya. Lalu tentukan yang mana yang lebih baik!

Di seri dua ini, kamu akan membuat laman kalendar berikut:

calendar page

Aplikasi kalendar digunakan untuk melacak acara dan pertemuan yang ditambahkan oleh pengguna. Kamu akan melihat variasi berbeda, tapi kebanyakan darinya akan memiliki elemen yang sama seperti kalendar fisik: bulan dan thaun saat ini, hari dalam sebulan, kejadian atau pertemuan yang dibuat oleh pengguna.

Berikut adalah beberapa contoh layout:

google calendar
android calendar

Persiapan Proyek

Tahap pertama, tentu saja, untuk membuat proyek React NAtive baru:

Ketika proyek telah siap, buka index.android.js dan ganti kode bawaan dengan kode berikut:

Buat sebuah folder src/pages dan buat  berkas Calendar.js di dalamnya.

Kamu juga akan perlu menambahkan paket react-native-vector-icons Ini terutama digunakan untuk ikon navigasi dan juga ikon yang akan digunakan di laman.

Buka berkas android/app/build.gradle dan tambahkan referensi ke paket:

Lakukan hal yang sama dengan android/settings.gradle dengan menambahkan baris berikut di bawah:

Buka android/app/src/main/java/com/react-native-common-screens/MainApplication.java  dan impor paket:

Terakhir, inisialisasi paket:

Membuat Laman Kalendar

Oke, sekarang kamu telah mencoba melayout kode sendiri ( tidak curang bukan? ) Saya akan tunjukkan cara membuat impementasi saya.

Pertama, saya kira ini akan jadi yang paling sulit untuk diimplementasikan, tapi percaya, ini tidak serumit sepanjang kamu tahu dasarnya. Ada beberapa kesempatan di sini untuk menggunakan kode Javascript untuk membantu rendering.

Mulai dengan menambahkan semua komponen dan paket-paket yang kamu butuhkan:

Kali ini akan ada sebuah paket baru yang belum kamu pasang yaitu lodash. Kamu tidak akan membutuhkan keseluruhannya, hanya fungsi range. Ini diugunakan untuk menggenerasi sebuah array angka berdasarkan jangkauan tertentu. Kamu bisa memasang fungsi ini saja denngan mengeksekusi npm install --save lodash.range di terminalmu.

Tambahkan kode boilerplate untuk membuat laman:

Header memiliki 3 elemen di dalamnya: tombol kembali, judul halaman saat ini, dan teks yang menunjukkan tampilan dari tanggal saat ini.

calendar page initial look

header memiliki flexDirection dari row sehingga tiap header_item disusun secara horizontal. nilai flex yang sama dimasukkan ke tiap dari mereka sehingga mereka mengkonsumsi jumlah ruang yang sama. text_center dan text_right digunakan untuk meratakan teks di dalam header_item ke tengah dan kanan. Ini dilakukan karena pada dasarnya mereka diratakan ke kiri dari kontainer mereka.

Ketika gaya telah ditambahkan, ini harusnya tampak seperti berikut:

calendar page styled header

Lalu kalendar sebenarnya, dimana dibagi dalam tiga bagian: header, hari dalam seminggu, dan tanggal kalendar:

Header kalendar mengizinkan pengguna untuk mengganti tahun dan bulan.

Setidaknya ada dua cara yang bisa diterapkan. Metode pertama adalah dengan memperlakukan tiap elemen sebagai item terpisah dan menerapkan justifyContent: 'space-between' di kontainer. Metode kedua adalah dengan menyatukan semua elemen yang berurusan dengan tahun dan menyatukan semua yang berurusan dengan bulan

Metode kedua diterapkan berikut. Berbicara secara semantik, ini akan membuat lebih logis karena tombol untuk navigasi kembali ke tahun, tahunnya sendiri, dan tombol untuk navigasi ke depan semuanya terhubung, jadi kamu bisa memperlakukannya sebagai satu hal dengan meletakkannya dalam satu kontainer. Hal yang sama juga benar pada kontrol bulan.

calendar page added calendar header

Dari sana, kamu bisa menerapkan teknik yang sama ke kedua komponen grup di baris yang sama. Untuk menambah ruang di antara dua tombol (maju dan mundur) dan label, kita gunakan justifyContent: 'space-between'. Kita menggunakan justifyContent: 'space-between' untuk mendekatkan semua elemen di dalam ke tengah. Akhirnya, kita menambahkan padding kiri dan kanan untuk menambah ruang di antara kedua grup.

calendar page added calendar header styles

Selanjutnya hari. Kita menggunakan sebuah fungsi untuk merendernya karena itu yang terbaik untuk menggunakan beberapa kode JavaScript untuk me-render semua elemen.

Jadi daripada memiliki tujuh View atau Text di render dalam tiap hari seminggu, kamu bisa memiliki array yang berisi hari-hari dalam seminggu. Kamu bisa mengulan hari-hari tersebut dengan fungsi Array.map() Untuk tiap pengulangan, render sebuah komponen Text yang menunjukkan hari.

Ingat bahwa kode di atas, fungsi toUpperCase() adalah mengkonversi semua huruf tiap hari ke kapital. React Native tidak hadir dengan properti text-transform, sehingga ini merupakan satu-satunya cara untuk mendapatkan huruf kapital dari pada mengkapitalkan kalimat secara manual/

calendar page added calendar week days

Ini styling untuk header kalendar:

calendar page styled calendar week days

Hari kalendar juga menggunakan fungsi untuk me-render hari.

Fungsi renderWeeks() menggunakan fungsi range() di lodash untuk menggenerasi array berisi hari dari bulan terakhir ke hari di bulan ini. Dua array tersebut digabungkan bersama.

Namun, kamu tidak bisa menggunakan array hasil sebagai sumber data hari di kalendar secara langsung. Ini karena jika kamu hanya mengulang item dan mengluarkan sebuah komponen Text untuk tiap hari, maka tidak akan ada perbedaan di antara tiap minggu. Kamu telah tahu bahwa untuk membuat setiap hari kelandar inline, kamu perlu menrapkan flexDirection: 'row' di kontainernya. Jadi menrapkannya ke satu kontainer akan menghasilkan semua hari di kalendar terletak dalam satu baris.

Ini berarti kamu perlu memiliki kontainer terpisah untuk tiap minggu. Pertanyaannya adalah bagaimana. Sekali lagi, ada uda cara untuk mencapainya.

Pertama adalah dengan memiliki sebuah variabel yang menyimpan berapa banyak hari yang telah di-output dan menambahkan conditional statement yang akan merender pembukaan <view> tiap kali variable mengandung 0 dan sebuah penutuh </view> tiap kali itu 7. Ketika 7, ulang kembali menjadi 0. Ini merupakan metode yang paling biasa.

Tapi saya akan menggunakan metode lain. Di bawah ini, fungsi getWeeksArray() digunakan untuk menrapkannya. Fungsi ini menerima array dari hari dan menyatukannya ke array yang masing-masing berisi tujuh hari. Dari sini, kamu bisa mengulan tiap array untuk me-render kontainer minggu. Lalu, untuk tiap pengulangan, kamu sekali lagi mengulang ke hari-hari di dalam minggu untuk me-render hari-hari tersebut. Begini ide dari funfsi renderDays().

Ini fungsi getWeeksArray()

Dan ini fungsi renderDays():

calendar page added calendar days

Tambahkan styling untuk tiap minggu (week_days) dan hari (day dan day_text)

calendar page add calendar days styling

Selanjutnya, catatan ditambahkan oleh pengguna pada hari yang telah dipilih. Sekali lagi, akan lebih baik jika menyatukan elemen berdasarkan fungsinya daripada berdasarkan penyusunannya di laman. Pastinya semua elemen ini berhubungan, sehingga kami akan meletakkannya di dalam kontainer yang sama. Namun dilihat dari dekat, kamu akan menyadari bahwa kamu bisa menyatukannya lebih jauh: catatan sesungguhnya dan tanggal terpilih. Dengan itu di pikiran, beginilah akhir markup-mu:

calendar page add notes

Tanggal terpilih melingkupi ruang yang lebih kecil dari catatan, sehingga kamu bisa menerapkan nilai flex lebih besar ke notes. flex: 3 dan flex: 1 digunakan dalam kasus ini, yang berarti catatan mengkonsumsi 3/4 dari ruang tersedia dan tanggal terpilih mengkonsumsi 1/4. Kamu juga bisa menggunakan desimal ( 0,75 dan 0.25) jika itu lebih logis untukmu. Yang penting adalah untuk memilih standar dan konsisten padanya. alignItems: 'flex-end' digunakan di notes_selected_date sehingga semua anaknya akan dirata kanankan. Ini dibutuhkan karena pada dasarnya mereka di rata kirikan.

calendar page added styling to logs

Terakhir, kita tambahkan logs, yang sangat mirip dengan yang ada di tutorial sebelumnya, jadi aku meninggalkannya padamu untuk membiarkanmu mencari bagaimana layoutnya dicapai.

Ini adalah styles nya:

Kesımpulan

Itulah! Di tutorial ini kamu telah membuat sebuah laman kalendar. Kita telah membuat sebuah layout aplikasi kalendar yang bagus, dan saya telah menunjukkan cara JavaScript digunakan untuk mengkompensasi beberapa limitasi Flexbox.

Seperti yang telah kamu lihat, kita membutuhkan sebuah cara untuk membatasi jumlah hari dalam satu baris ke hanya 7 hari. Flexbox tidak memiliki sebuah cara untuk ini, jadi kita menggunakan JavaScript untuk merekonstruksi array awal sehingga bisa terbagi dalam grup yang berisi 7 hari. Dari sini, yang perlu kita lakukan adalah membungkus tiap grup ke dalam sebuah View lalu menerapkan flexDirection: 'row' untuk membuat semuanya memiliki baris sendiri.

Di tutorial berikutnya, kamu akan belajar cara mengimplementasikan layout yang biasanya digunakan galeri. Di waktu luang, cek tutorial lain tentang React Native dan Flexbox.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.