Sekarang bagaimana
dengan styling, bagaimana dengan tombol-tombol ini? Sekarang untuk tombol-tombol ini,
Anda mungkin memperhatikan bahwa Anda sekarang memiliki perilaku aneh jika
Anda menulisnya kembali ke mode potret, juga di sini di Android. Di sisi lain jika kita mengubah sesuatu dan membatalkannya hanya
agar aplikasi dimulai kembali dan kita mulai dalam mode potret, Anda akan melihatnya terlihat bagus
tetapi sekarang jika kita beralih ke mode lansekap, itu terlihat buruk lagi.
Jadi pada dasarnya, lebar tombol kita akan masuk ketika aplikasi dimulai dan tidak menyesuaikan ketika ukuran layar kita berubah dan tentu saja itu
berubah ketika kita memutar perangkat karena lebar dan tinggi ditukar, jadi kita memiliki lebih banyak lebar
yang
tersedia jika kita Sedang dalam mode lansekap daripada yang kita miliki dalam mode potret.
Masalahnya adalah bahwa saat ini di layar mulai permainan ketika kami mengatur lebar tombol kami yang
kami lakukan di sana, kami menggunakan dimensi dan ini dan itu sangat penting untuk diingat,
ini hanya dihitung ketika aplikasi Anda mulai.
Jadi ketika aplikasi dimulai untuk pertama kalinya, ini memiliki melihat pada lebar yang tersedia dan jika itu
dimulai dalam
mode potret, itulah lebar mode potret, jika itu dimulai dalam mode lansekap, itu adalah mode mode
lansekap dan ini log in dan ketika Anda kemudian memutar perangkat dan jika Anda kemudian memutar perangkat, ini tidak dihitung ulang.
Sekarang tentu saja Anda ingin ini dihitung ulang dan ada perbaikan sederhana untuk itu.
Jika Anda memiliki lebar atau tinggi, apa pun yang Anda dapatkan dari dimensi yang harus
menghargai perubahan orientasi, jadi yang harus dihitung ulang saat orientasi berubah, maka Anda tidak boleh menggunakan
lebar dimensi di sana dalam stylesheet Anda, tetapi sebaliknya, Anda perlu mengelola lebar atau properti apa pun yang dapat
berubah secara dinamis dan yang harus merender ulang UI saat diubah dengan keadaan.
Jadi di sini di string permainan awal,
kita sudah memiliki useState, kita sekarang juga dapat mengelola lebar tombol kita di sini, mengatur lebar tombol dengan useState dan
menginisialisasi ini ke dimensi mendapatkan lebar jendela dibagi dengan empat yang merupakan default
yang saya mulai dengan.
Sekarang Anda dapat mengatur pendengar di sini pada dimensi, daripada menggunakan get dengan memanggil add event listener
dan mendengarkan acara perubahan yang menyala setiap kali dimensi berubah yang biasanya
terjadi ketika pengguna memutar perangkat.
Jadi di sini, kita dapat mengatur fungsi, memperbarui tata letak misalnya yang merupakan fungsi di mana saya memanggil mengatur tombol lebar dan mengaturnya kembali ke
lebar saya di sini tetapi lebar dimensi akan berbeda berdasarkan pada lebar layar ketika kita memutar dan fungsi inilah yang
ingin saya panggil di
sini, jadi perbarui tata letak yang ingin saya panggil di sini tanpa tanda kurung di sini
karena kami hanya ingin menunjukkan fungsi ini sehingga dipanggil untuk kami ketika
dimensi berubah dan ini akan memastikan bahwa ini kembali berjalan setiap kali dimensi kita
berubah dan karena itu komponen ini akan dirender ulang.
Sekarang kita hanya perlu memastikan bahwa kita menggunakan tombol yang dihitung ulang secara dinamis dengan status di sini.
Kita bisa melakukan ini dengan menggunakan gaya sebaris alih-alih objek stylesheet.
Sekarang jika Anda memiliki gaya lain yang diatur untuk tombol yang tidak tergantung pada dimensi, maka Anda dapat meninggalkannya
di sini di stylesheet tentu saja, dalam hal
ini saya tidak memilikinya, jadi saya hanya akan mengomentari ini dan Anda kemudian dapat menggabungkannya
dengan beberapa gaya inline. Di sini karena kita tidak
memiliki gaya standar lainnya, saya hanya akan mengganti objek stylesheet yang kita tunjuk dengan objek gaya inline di
mana saya mengatur lebar sama dengan lebar tombol dan melakukan hal yang sama tentu saja untuk tombol kedua saya
dan dengan itu, kami sekarang ada gaya yang berubah setiap kali kita memutar perangkat.
Jadi jika kita menyimpan ini, Anda akan melihat ini sekarang terlihat baik
tidak peduli bagaimana kami memutar ini, juga di Android karena ini akan dirender ulang.
Sekarang satu catatan penting di sini, saat ini saat ini saya sedang menyiapkan banyak pendengar acara di sini, saya
selalu menambahkan pendengar acara baru setiap kali komponen ini dirender kembali dan itu bukan
yang ingin
saya lakukan dan kita bisa menggunakan penggunaan efek yang juga dibangun ke dalam React dan yang harus Anda waspadai untuk
memiliki kode yang kami jalankan setiap kali komponen kami dirender ulang.
Jadi sekarang saya dapat menggunakan efek penggunaan di sini dan fungsi yang ingin saya jalankan pada setiap re-render adalah fungsi yang
pada akhirnya membuat fungsi tata letak pembaruan ini di sini dan menambahkan pendengar acara
saya, jadi saya akan memotong ini dan menambahkannya di sini dalam menggunakan fungsi efek dan
jika kita kemudian mengembalikan sesuatu di sini dalam efek penggunaan, itu fungsi pembersihan kami yang
berjalan tepat sebelum efek penggunaan berjalan di sana, saya ingin membersihkan pendengar saya karena di sini saya kemudian dapat memanggil dimensi menghapus
perubahan pendengar acara untuk perbarui tata letak.
Jadi sekarang kita membersihkan ini dan mengatur yang baru ketika komponen kita merender, membersihkan yang lama, mengatur yang baru
dan oleh karena itu kita selalu hanya memiliki satu pendengar acara yang berjalan.
Jika kita melakukannya seperti ini, itu lebih bersih dan oleh karena itu jika kita sekarang menyimpan ini dan kembali, kita
memiliki perilaku yang sama seperti sebelumnya tetapi sekarang dengan cara yang bersih dengan memanfaatkan useState dan efek penggunaan dan
yang paling penting, kemampuan mendengarkan acara dari Dimensi API yang memungkinkan kita untuk tidak hanya mengatur dimensi sekali tetapi
menghitung ulang mereka ketika mereka berubah.