1
00:00:02,130 --> 00:00:03,280
Sekarang bagaimana

2
00:00:03,280 --> 00:00:07,130
dengan styling, bagaimana dengan tombol-tombol ini? Sekarang untuk tombol-tombol ini,

3
00:00:07,130 --> 00:00:10,600
Anda mungkin memperhatikan bahwa Anda sekarang memiliki perilaku aneh jika

4
00:00:10,610 --> 00:00:18,600
Anda menulisnya kembali ke mode potret, juga di sini di Android. Di sisi lain jika kita mengubah sesuatu dan membatalkannya hanya

5
00:00:18,690 --> 00:00:24,000
agar aplikasi dimulai kembali dan kita mulai dalam mode potret, Anda akan melihatnya terlihat bagus

6
00:00:24,000 --> 00:00:28,240
tetapi sekarang jika kita beralih ke mode lansekap, itu terlihat buruk lagi.

7
00:00:28,260 --> 00:00:36,060
Jadi pada dasarnya, lebar tombol kita akan masuk ketika aplikasi dimulai dan tidak menyesuaikan ketika ukuran layar kita berubah dan tentu saja itu

8
00:00:36,060 --> 00:00:41,670
berubah ketika kita memutar perangkat karena lebar dan tinggi ditukar, jadi kita memiliki lebih banyak lebar

9
00:00:41,670 --> 00:00:42,320
yang

10
00:00:42,330 --> 00:00:47,280
tersedia jika kita Sedang dalam mode lansekap daripada yang kita miliki dalam mode potret.

11
00:00:47,280 --> 00:00:53,730
Masalahnya adalah bahwa saat ini di layar mulai permainan ketika kami mengatur lebar tombol kami yang

12
00:00:53,730 --> 00:00:59,970
kami lakukan di sana, kami menggunakan dimensi dan ini dan itu sangat penting untuk diingat,

13
00:00:59,970 --> 00:01:02,970
ini hanya dihitung ketika aplikasi Anda mulai.

14
00:01:02,970 --> 00:01:08,220
Jadi ketika aplikasi dimulai untuk pertama kalinya, ini memiliki melihat pada lebar yang tersedia dan jika itu

15
00:01:08,220 --> 00:01:08,910
dimulai dalam

16
00:01:08,910 --> 00:01:13,980
mode potret, itulah lebar mode potret, jika itu dimulai dalam mode lansekap, itu adalah mode mode

17
00:01:13,980 --> 00:01:20,390
lansekap dan ini log in dan ketika Anda kemudian memutar perangkat dan jika Anda kemudian memutar perangkat, ini tidak dihitung ulang.

18
00:01:20,550 --> 00:01:25,970
Sekarang tentu saja Anda ingin ini dihitung ulang dan ada perbaikan sederhana untuk itu.

19
00:01:26,100 --> 00:01:33,530
Jika Anda memiliki lebar atau tinggi, apa pun yang Anda dapatkan dari dimensi yang harus

20
00:01:33,570 --> 00:01:41,430
menghargai perubahan orientasi, jadi yang harus dihitung ulang saat orientasi berubah, maka Anda tidak boleh menggunakan

21
00:01:41,430 --> 00:01:50,250
lebar dimensi di sana dalam stylesheet Anda, tetapi sebaliknya, Anda perlu mengelola lebar atau properti apa pun yang dapat

22
00:01:50,570 --> 00:01:57,230
berubah secara dinamis dan yang harus merender ulang UI saat diubah dengan keadaan.

23
00:01:57,230 --> 00:02:00,960
Jadi di sini di string permainan awal,

24
00:02:01,130 --> 00:02:11,470
kita sudah memiliki useState, kita sekarang juga dapat mengelola lebar tombol kita di sini, mengatur lebar tombol dengan useState dan

25
00:02:11,500 --> 00:02:18,290
menginisialisasi ini ke dimensi mendapatkan lebar jendela dibagi dengan empat yang merupakan default

26
00:02:18,300 --> 00:02:21,220
yang saya mulai dengan.

27
00:02:21,330 --> 00:02:27,660
Sekarang Anda dapat mengatur pendengar di sini pada dimensi, daripada menggunakan get dengan memanggil add event listener

28
00:02:28,020 --> 00:02:32,640
dan mendengarkan acara perubahan yang menyala setiap kali dimensi berubah yang biasanya

29
00:02:32,640 --> 00:02:35,000
terjadi ketika pengguna memutar perangkat.

30
00:02:35,010 --> 00:02:43,950
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

31
00:02:43,950 --> 00:02:50,760
lebar saya di sini tetapi lebar dimensi akan berbeda berdasarkan pada lebar layar ketika kita memutar dan fungsi inilah yang

32
00:02:50,760 --> 00:02:52,470
ingin saya panggil di

33
00:02:52,470 --> 00:02:58,020
sini, jadi perbarui tata letak yang ingin saya panggil di sini tanpa tanda kurung di sini

34
00:02:58,020 --> 00:03:02,430
karena kami hanya ingin menunjukkan fungsi ini sehingga dipanggil untuk kami ketika

35
00:03:02,460 --> 00:03:07,530
dimensi berubah dan ini akan memastikan bahwa ini kembali berjalan setiap kali dimensi kita

36
00:03:07,830 --> 00:03:11,160
berubah dan karena itu komponen ini akan dirender ulang.

37
00:03:11,160 --> 00:03:16,100
Sekarang kita hanya perlu memastikan bahwa kita menggunakan tombol yang dihitung ulang secara dinamis dengan status di sini.

38
00:03:16,230 --> 00:03:20,130
Kita bisa melakukan ini dengan menggunakan gaya sebaris alih-alih objek stylesheet.

39
00:03:20,130 --> 00:03:25,770
Sekarang jika Anda memiliki gaya lain yang diatur untuk tombol yang tidak tergantung pada dimensi, maka Anda dapat meninggalkannya

40
00:03:25,770 --> 00:03:28,170
di sini di stylesheet tentu saja, dalam hal

41
00:03:28,170 --> 00:03:32,910
ini saya tidak memilikinya, jadi saya hanya akan mengomentari ini dan Anda kemudian dapat menggabungkannya

42
00:03:32,910 --> 00:03:36,120
dengan beberapa gaya inline. Di sini karena kita tidak

43
00:03:36,120 --> 00:03:41,550
memiliki gaya standar lainnya, saya hanya akan mengganti objek stylesheet yang kita tunjuk dengan objek gaya inline di

44
00:03:41,550 --> 00:03:47,070
mana saya mengatur lebar sama dengan lebar tombol dan melakukan hal yang sama tentu saja untuk tombol kedua saya

45
00:03:47,130 --> 00:03:51,390
dan dengan itu, kami sekarang ada gaya yang berubah setiap kali kita memutar perangkat.

46
00:03:51,390 --> 00:03:55,550
Jadi jika kita menyimpan ini, Anda akan melihat ini sekarang terlihat baik

47
00:03:55,550 --> 00:04:00,350
tidak peduli bagaimana kami memutar ini, juga di Android karena ini akan dirender ulang.

48
00:04:00,570 --> 00:04:07,050
Sekarang satu catatan penting di sini, saat ini saat ini saya sedang menyiapkan banyak pendengar acara di sini, saya

49
00:04:07,050 --> 00:04:11,670
selalu menambahkan pendengar acara baru setiap kali komponen ini dirender kembali dan itu bukan

50
00:04:11,670 --> 00:04:12,500
yang ingin

51
00:04:12,720 --> 00:04:19,320
saya lakukan dan kita bisa menggunakan penggunaan efek yang juga dibangun ke dalam React dan yang harus Anda waspadai untuk

52
00:04:19,410 --> 00:04:23,540
memiliki kode yang kami jalankan setiap kali komponen kami dirender ulang.

53
00:04:23,620 --> 00:04:31,020
Jadi sekarang saya dapat menggunakan efek penggunaan di sini dan fungsi yang ingin saya jalankan pada setiap re-render adalah fungsi yang

54
00:04:31,020 --> 00:04:36,210
pada akhirnya membuat fungsi tata letak pembaruan ini di sini dan menambahkan pendengar acara

55
00:04:36,270 --> 00:04:41,580
saya, jadi saya akan memotong ini dan menambahkannya di sini dalam menggunakan fungsi efek dan

56
00:04:41,580 --> 00:04:46,950
jika kita kemudian mengembalikan sesuatu di sini dalam efek penggunaan, itu fungsi pembersihan kami yang

57
00:04:46,950 --> 00:04:54,940
berjalan tepat sebelum efek penggunaan berjalan di sana, saya ingin membersihkan pendengar saya karena di sini saya kemudian dapat memanggil dimensi menghapus

58
00:04:54,950 --> 00:04:57,900
perubahan pendengar acara untuk perbarui tata letak.

59
00:04:57,900 --> 00:05:02,840
Jadi sekarang kita membersihkan ini dan mengatur yang baru ketika komponen kita merender, membersihkan yang lama, mengatur yang baru

60
00:05:02,840 --> 00:05:06,610
dan oleh karena itu kita selalu hanya memiliki satu pendengar acara yang berjalan.

61
00:05:06,770 --> 00:05:13,350
Jika kita melakukannya seperti ini, itu lebih bersih dan oleh karena itu jika kita sekarang menyimpan ini dan kembali, kita

62
00:05:13,350 --> 00:05:19,650
memiliki perilaku yang sama seperti sebelumnya tetapi sekarang dengan cara yang bersih dengan memanfaatkan useState dan efek penggunaan dan

63
00:05:19,950 --> 00:05:26,370
yang paling penting, kemampuan mendengarkan acara dari Dimensi API yang memungkinkan kita untuk tidak hanya mengatur dimensi sekali tetapi

64
00:05:26,610 --> 00:05:29,040
menghitung ulang mereka ketika mereka berubah.