Sekarang dengan itu, jika kita pergi ke layar berikutnya di mana kita memiliki permainan berjalan, kita menghadapi masalah berikutnya di
sana. Dalam
mode potret terlihat bagus tetapi jika kita memutar perangkat, maka ini tidak terlihat terlalu bagus.
Sekarang di sini, solusinya bisa saja kita mengubah sedikit styling jika
kita tidak memiliki ketinggian yang tersedia.
Atau, kami membuat tata letak yang sama sekali berbeda berdasarkan ruang yang tersedia, keduanya
akan menjadi opsi yang Anda miliki.
Misalnya, Anda dapat mencoba merender ini berdampingan dengan hanya menambahkan tanda centang jika di sini di layar permainan Anda
di mana Anda mengembalikan kode jsx yang sama sekali berbeda dan mungkin juga dengan gaya yang sama
sekali berbeda dan oleh karena itu tata letak berdasarkan lebar atau tinggi yang tersedia lalu Anda hanya perlu mengatur pendengar yang
merender ulang komponen
Anda, jadi dengan mengatur panggung seperti yang kami lakukan di sini di layar mulai permainan
untuk merender ulang komponen Anda kapan pun itu terjadi. Saya pikir itu akan agak menarik dan karena itu saya akan melakukan sesuatu di sini.
Yang akan saya lakukan adalah saya ingin me-render tombol saya di sini ke kiri dan kanan wadah nomor
jika kita hanya memiliki ketinggian yang tersedia dan menjadikannya seperti yang selalu kita lakukan
jika bukan itu masalahnya.
Jadi saya ingin membuat kode jsx yang sama sekali berbeda berdasarkan dimensi saya.
Jadi di sini saya akan menambahkan cek jika dan katakan jika dimensi mendapatkan ketinggian jendela, katakanlah jika itu lebih kecil dari 500 dan kita
akan melihat apakah nilai itu berfungsi, maka
saya ingin mengembalikan kode jsx ini dari bawah sana,
jadi saya ' Saya akan menyalinnya, meletakkannya di antara tanda kurung di sini, tanda kurung, tetapi saya tidak ingin memiliki kartu saya di sini,
sebagai gantinya saya akan memiliki tombol utama pertama sebelum wadah nomor saya, yang berikutnya setelah wadah nomor dan
saya akan memiliki semua tentang hal itu di dalam pandangan
baru di sini yang akan saya bahas di sini, yang seharusnya meletakkan ketiga hal ini berturut-turut.
Jadi saya akan menambahkan gaya baru di sini, gaya katakanlah kontrol atau apa pun yang Anda ingin beri nama dan sekarang
saya menambahkan ini ke stylesheet saya di sini dan itu stylesheet yang sama seperti sebelumnya
karena hanya mengatur gaya yang dapat saya gunakan di mana saja saya komponen tidak peduli di bawah
kondisi apa saya membuat apa dan di sini saya akan
mengatur arah flex ini ke baris, defaultnya adalah kolom dan sekarang kita ingin memiliki baris di sini dan saya akan mengatur
justifikasi konten ke ruang sekitar dan kita akan melihat bagaimana itu terlihat seperti. Jika sekarang kita menyimpan ini dan kita memulai permainan baru di sini dalam mode lansekap, tidak terlihat terlalu
buruk, masih ada beberapa
pekerjaan yang harus dilakukan tetapi inilah yang sekarang saya dapatkan di sini dalam mode lansekap atau pada perangkat dengan ketinggian terbatas.
Pada perangkat dengan ketinggian lebih, saya
masih mendapatkan tampilan lama di sini yang tentu saja persis seperti yang saya inginkan.
Sekarang mari kita perbaiki pandangan ini di sini dan oleh karena itu kita bisa pergi ke kontrol
dan memberikan lebar katakanlah 80% sehingga keseluruhan wadah lebih besar dan sangat penting, atur item yang selaras di sini ke tengah
sehingga wadah angka dan dua tombol semuanya berpusat secara vertikal. Dan sekarang dengan itu jika kita coba
lagi di sini, kita masukkan ini, ini terlihat jauh lebih baik dan bekerja dengan cara yang sama seperti sebelumnya,
tetapi sekarang kita memiliki tata letak yang berbeda berdasarkan dimensi kita.
Sekarang tentu saja masalahnya adalah tata letak ini tidak berubah jika kita memutar, bukan akhir dunia tetapi
kita mungkin ingin mengubah kembali ke tata letak lama dan Anda
belajar cara kerjanya, kita hanya perlu mengelola ini dengan negara dan mengatur seorang pendengar.
Sekarang saya sudah menggunakanState dan useEffect di sini di layar game jadi yang perlu kita
lakukan dalam komponen layar game adalah mulai dengan mengatur status itu di sini dan pada akhirnya apa yang ingin kita kelola di
sini adalah lebar perangkat kita yang berubah seiring waktu, mungkin beri nama lebar perangkat yang tersedia ini untuk memperjelas bahwa kami tidak mengatur lebar perangkat di sini, kami
hanya mengatur lebar perangkat yang terdeteksi, karena itu Anda juga
dapat memberi nama lebar perangkat yang terdeteksi ini.
Saya akan memberi nama lebar perangkat yang tersedia dan mengatur lebar perangkat yang tersedia. Saya mengelola ini dengan useState di mana saya menggunakan dimensi dapatkan
lebar jendela untuk mendapatkan lebar perangkat yang tersedia dan tentu saja, saya baru tahu ini salah, kami tertarik pada ketinggian, bukan lebar tetapi kami akan
membutuhkan
lebar juga untuk periksa
ini di sini, jadi kita akan membutuhkan keduanya.
Jadi kita memiliki lebar perangkat yang tersedia dan saya juga akan mengelola negara lain,
itu ketinggian
perangkat yang tersedia, di sini juga ini diatur
ketinggian perangkat yang tersedia dan oleh karena itu
di sini pada awalnya, kita mendapatkan ketinggian perangkat yang tersedia dan
sekarang kita perlu mengubah keduanya ketika kita perubahan orientasi. Untuk itu, kita dapat menggunakan efek misalnya di sini, mengatur
fungsi yang berjalan setiap kali komponen kita merender dan dalam fungsi ini di sini, saya akan mengatur dimensi, menambahkan pendengar acara, mendengarkan untuk mengubah acara
dan mengatur fungsi yang seharusnya memicu ketika itu kasus, pembaruan tata letak misalnya adalah nama yang pas
karena itulah yang kami lakukan dan di sana, saya
sebut setel lebar perangkat yang tersedia dan saya atur ini ke dimensi dapatkan jendela. lebar dan tentu saja juga mengatur ketinggian perangkat yang
tersedia untuk dimensi mendapatkan ketinggian jendela. Oleh karena itu tata letak pembaruan adalah fungsi yang
kami tunjukkan pada pendengar acara kami tentang dimensi dan seperti sebelumnya, kami membutuhkan fungsi pembersihan
untuk menghindari render yang tidak perlu dan dalam fungsi ini, kami hanya menggunakan dimensi menghapus perubahan pendengar acara di
mana kami menunjuk pada tata letak pembaruan dan kami baik Sekarang kita hanya perlu menggunakan dua status kita di sini - lebar perangkat yang
tersedia dan tinggi perangkat yang tersedia.
Jadi dalam hal ini jika periksa di sini, saya menggunakan lebar perangkat yang tersedia dan di sini
saya tertarik pada ketinggian, saya menggunakan ketinggian perangkat yang tersedia. Jika sekarang kita menyimpan ini, kita harus memiliki tata letak di
mana jika kita memulai permainan, kita memiliki tampilan ini tetapi jika kita kemudian memutar ke mode lansekap, ini berubah dan
tentu saja juga mengubahnya kembali jika perlu. Di sini di iOS, kami memiliki tampilan ini dan kami memiliki tampilan ini jika kami memutar. Jadi sekarang ini benar-benar terlihat
bagus dan ini memberi kita tampilan yang kita inginkan berdasarkan lebar dan tinggi yang tersedia dan
itu juga menghormati perubahan ketika kita memutar perangkat.