1 00:00:02,400 --> 00:00:09,500 Sekarang dengan itu, jika kita pergi ke layar berikutnya di mana kita memiliki permainan berjalan, kita menghadapi masalah berikutnya di 2 00:00:09,520 --> 00:00:10,610 sana. Dalam 3 00:00:10,610 --> 00:00:15,680 mode potret terlihat bagus tetapi jika kita memutar perangkat, maka ini tidak terlihat terlalu bagus. 4 00:00:15,680 --> 00:00:20,520 Sekarang di sini, solusinya bisa saja kita mengubah sedikit styling jika 5 00:00:20,570 --> 00:00:23,320 kita tidak memiliki ketinggian yang tersedia. 6 00:00:23,420 --> 00:00:28,150 Atau, kami membuat tata letak yang sama sekali berbeda berdasarkan ruang yang tersedia, keduanya 7 00:00:28,220 --> 00:00:30,470 akan menjadi opsi yang Anda miliki. 8 00:00:30,470 --> 00:00:36,920 Misalnya, Anda dapat mencoba merender ini berdampingan dengan hanya menambahkan tanda centang jika di sini di layar permainan Anda 9 00:00:36,920 --> 00:00:42,620 di mana Anda mengembalikan kode jsx yang sama sekali berbeda dan mungkin juga dengan gaya yang sama 10 00:00:42,620 --> 00:00:49,820 sekali berbeda dan oleh karena itu tata letak berdasarkan lebar atau tinggi yang tersedia lalu Anda hanya perlu mengatur pendengar yang 11 00:00:49,820 --> 00:00:51,200 merender ulang komponen 12 00:00:51,200 --> 00:00:56,150 Anda, jadi dengan mengatur panggung seperti yang kami lakukan di sini di layar mulai permainan 13 00:00:56,150 --> 00:01:02,560 untuk merender ulang komponen Anda kapan pun itu terjadi. Saya pikir itu akan agak menarik dan karena itu saya akan melakukan sesuatu di sini. 14 00:01:02,570 --> 00:01:08,740 Yang akan saya lakukan adalah saya ingin me-render tombol saya di sini ke kiri dan kanan wadah nomor 15 00:01:08,740 --> 00:01:13,370 jika kita hanya memiliki ketinggian yang tersedia dan menjadikannya seperti yang selalu kita lakukan 16 00:01:13,390 --> 00:01:15,160 jika bukan itu masalahnya. 17 00:01:15,460 --> 00:01:20,560 Jadi saya ingin membuat kode jsx yang sama sekali berbeda berdasarkan dimensi saya. 18 00:01:20,560 --> 00:01:30,540 Jadi di sini saya akan menambahkan cek jika dan katakan jika dimensi mendapatkan ketinggian jendela, katakanlah jika itu lebih kecil dari 500 dan kita 19 00:01:30,670 --> 00:01:33,850 akan melihat apakah nilai itu berfungsi, maka 20 00:01:33,850 --> 00:01:37,770 saya ingin mengembalikan kode jsx ini dari bawah sana, 21 00:01:37,860 --> 00:01:47,770 jadi saya ' Saya akan menyalinnya, meletakkannya di antara tanda kurung di sini, tanda kurung, tetapi saya tidak ingin memiliki kartu saya di sini, 22 00:01:47,770 --> 00:01:55,390 sebagai gantinya saya akan memiliki tombol utama pertama sebelum wadah nomor saya, yang berikutnya setelah wadah nomor dan 23 00:01:55,390 --> 00:01:59,530 saya akan memiliki semua tentang hal itu di dalam pandangan 24 00:02:02,410 --> 00:02:09,000 baru di sini yang akan saya bahas di sini, yang seharusnya meletakkan ketiga hal ini berturut-turut. 25 00:02:09,010 --> 00:02:16,180 Jadi saya akan menambahkan gaya baru di sini, gaya katakanlah kontrol atau apa pun yang Anda ingin beri nama dan sekarang 26 00:02:16,300 --> 00:02:21,400 saya menambahkan ini ke stylesheet saya di sini dan itu stylesheet yang sama seperti sebelumnya 27 00:02:21,400 --> 00:02:27,460 karena hanya mengatur gaya yang dapat saya gunakan di mana saja saya komponen tidak peduli di bawah 28 00:02:27,460 --> 00:02:31,540 kondisi apa saya membuat apa dan di sini saya akan 29 00:02:31,540 --> 00:02:38,890 mengatur arah flex ini ke baris, defaultnya adalah kolom dan sekarang kita ingin memiliki baris di sini dan saya akan mengatur 30 00:02:39,070 --> 00:02:48,360 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 31 00:02:48,390 --> 00:02:49,470 buruk, masih ada beberapa 32 00:02:49,470 --> 00:02:54,690 pekerjaan yang harus dilakukan tetapi inilah yang sekarang saya dapatkan di sini dalam mode lansekap atau pada perangkat dengan ketinggian terbatas. 33 00:02:55,350 --> 00:02:57,370 Pada perangkat dengan ketinggian lebih, saya 34 00:02:57,480 --> 00:03:01,530 masih mendapatkan tampilan lama di sini yang tentu saja persis seperti yang saya inginkan. 35 00:03:01,620 --> 00:03:08,260 Sekarang mari kita perbaiki pandangan ini di sini dan oleh karena itu kita bisa pergi ke kontrol 36 00:03:08,260 --> 00:03:16,340 dan memberikan lebar katakanlah 80% sehingga keseluruhan wadah lebih besar dan sangat penting, atur item yang selaras di sini ke tengah 37 00:03:16,340 --> 00:03:24,340 sehingga wadah angka dan dua tombol semuanya berpusat secara vertikal. Dan sekarang dengan itu jika kita coba 38 00:03:24,340 --> 00:03:33,560 lagi di sini, kita masukkan ini, ini terlihat jauh lebih baik dan bekerja dengan cara yang sama seperti sebelumnya, 39 00:03:33,560 --> 00:03:38,950 tetapi sekarang kita memiliki tata letak yang berbeda berdasarkan dimensi kita. 40 00:03:38,990 --> 00:03:44,960 Sekarang tentu saja masalahnya adalah tata letak ini tidak berubah jika kita memutar, bukan akhir dunia tetapi 41 00:03:45,050 --> 00:03:49,560 kita mungkin ingin mengubah kembali ke tata letak lama dan Anda 42 00:03:49,670 --> 00:03:54,690 belajar cara kerjanya, kita hanya perlu mengelola ini dengan negara dan mengatur seorang pendengar. 43 00:03:54,690 --> 00:04:00,200 Sekarang saya sudah menggunakanState dan useEffect di sini di layar game jadi yang perlu kita 44 00:04:00,200 --> 00:04:08,180 lakukan dalam komponen layar game adalah mulai dengan mengatur status itu di sini dan pada akhirnya apa yang ingin kita kelola di 45 00:04:08,370 --> 00:04:18,370 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 46 00:04:18,370 --> 00:04:21,960 hanya mengatur lebar perangkat yang terdeteksi, karena itu Anda juga 47 00:04:22,030 --> 00:04:25,370 dapat memberi nama lebar perangkat yang terdeteksi ini. 48 00:04:25,450 --> 00:04:34,090 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 49 00:04:34,090 --> 00:04:43,930 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 50 00:04:43,930 --> 00:04:44,470 membutuhkan 51 00:04:44,470 --> 00:04:46,480 lebar juga untuk periksa 52 00:04:49,520 --> 00:04:52,850 ini di sini, jadi kita akan membutuhkan keduanya. 53 00:04:53,300 --> 00:04:59,250 Jadi kita memiliki lebar perangkat yang tersedia dan saya juga akan mengelola negara lain, 54 00:04:59,270 --> 00:05:00,560 itu ketinggian 55 00:05:00,560 --> 00:05:03,990 perangkat yang tersedia, di sini juga ini diatur 56 00:05:04,000 --> 00:05:07,300 ketinggian perangkat yang tersedia dan oleh karena itu 57 00:05:07,300 --> 00:05:11,700 di sini pada awalnya, kita mendapatkan ketinggian perangkat yang tersedia dan 58 00:05:11,710 --> 00:05:19,710 sekarang kita perlu mengubah keduanya ketika kita perubahan orientasi. Untuk itu, kita dapat menggunakan efek misalnya di sini, mengatur 59 00:05:19,710 --> 00:05:29,310 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 60 00:05:29,330 --> 00:05:35,810 dan mengatur fungsi yang seharusnya memicu ketika itu kasus, pembaruan tata letak misalnya adalah nama yang pas 61 00:05:35,810 --> 00:05:39,720 karena itulah yang kami lakukan dan di sana, saya 62 00:05:39,850 --> 00:05:51,420 sebut setel lebar perangkat yang tersedia dan saya atur ini ke dimensi dapatkan jendela. lebar dan tentu saja juga mengatur ketinggian perangkat yang 63 00:05:51,420 --> 00:05:59,410 tersedia untuk dimensi mendapatkan ketinggian jendela. Oleh karena itu tata letak pembaruan adalah fungsi yang 64 00:05:59,410 --> 00:06:05,680 kami tunjukkan pada pendengar acara kami tentang dimensi dan seperti sebelumnya, kami membutuhkan fungsi pembersihan 65 00:06:06,010 --> 00:06:14,080 untuk menghindari render yang tidak perlu dan dalam fungsi ini, kami hanya menggunakan dimensi menghapus perubahan pendengar acara di 66 00:06:14,170 --> 00:06:23,010 mana kami menunjuk pada tata letak pembaruan dan kami baik Sekarang kita hanya perlu menggunakan dua status kita di sini - lebar perangkat yang 67 00:06:23,040 --> 00:06:25,390 tersedia dan tinggi perangkat yang tersedia. 68 00:06:25,500 --> 00:06:32,190 Jadi dalam hal ini jika periksa di sini, saya menggunakan lebar perangkat yang tersedia dan di sini 69 00:06:32,220 --> 00:06:40,170 saya tertarik pada ketinggian, saya menggunakan ketinggian perangkat yang tersedia. Jika sekarang kita menyimpan ini, kita harus memiliki tata letak di 70 00:06:40,170 --> 00:06:47,070 mana jika kita memulai permainan, kita memiliki tampilan ini tetapi jika kita kemudian memutar ke mode lansekap, ini berubah dan 71 00:06:47,070 --> 00:06:55,830 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 72 00:06:55,830 --> 00:07:03,500 bagus dan ini memberi kita tampilan yang kita inginkan berdasarkan lebar dan tinggi yang tersedia dan 73 00:07:03,510 --> 00:07:06,960 itu juga menghormati perubahan ketika kita memutar perangkat.