1
00:00:02,260 --> 00:00:08,000
Sekarang kita memiliki tampilan kartu, sekarang sebagai hal berikutnya mari kita perbaiki tombol dan itu adalah sesuatu yang sudah saya

2
00:00:08,000 --> 00:00:11,860
tunjukkan kepada Anda, jadi pasti kesempatan Anda untuk menjeda video dan melakukannya sendiri.

3
00:00:11,870 --> 00:00:16,430
Saya ingin memastikan bahwa tombol memiliki ukuran yang sama, mereka tidak boleh mengambil lebar penuh

4
00:00:16,760 --> 00:00:22,070
yang tersedia tetapi mereka harus memiliki ukuran yang sama yang memastikan bahwa teks sesuai di sana dan mereka

5
00:00:22,280 --> 00:00:22,990
berukuran sama.

6
00:00:23,000 --> 00:00:30,020
Jadi kesempatan Anda untuk menjeda video, setelah itu kami akan melakukan ini bersama. Apakah kamu berhasil?

7
00:00:30,020 --> 00:00:35,480
Mari kita pastikan tombol memiliki ukuran yang sama dan untuk ini di layar permulaan permainan di mana saya

8
00:00:35,480 --> 00:00:43,070
memiliki tombol, Anda belajar bahwa solusinya adalah untuk membungkus tombol dalam tampilan. Jadi Anda harus menambahkan komponen tampilan Anda sendiri di sekitar

9
00:00:43,220 --> 00:00:45,200
tombol dan sekarang Anda

10
00:00:45,200 --> 00:00:52,670
dapat menetapkan gaya untuk tombol ini, jadi untuk kedua tombol di sini dan saya akan menggunakan objek tombol di objek

11
00:00:52,670 --> 00:00:55,190
gaya saya di sana, jadi mari kita

12
00:00:55,370 --> 00:01:02,730
tambahkan tombol di sini dan cukup beri lebar dan di sini, lebar yang akan saya pilih adalah katakanlah 80.

13
00:01:02,750 --> 00:01:09,050
Mari kita lihat seperti apa ini, jika saya menyimpan ini, agak terlalu kecil karena sepertinya ada jeda baris

14
00:01:09,260 --> 00:01:10,370
pada tombol ini.

15
00:01:10,370 --> 00:01:16,890
Jadi mari kita lanjutkan dengan 120, sekarang sudah pasti terlalu banyak, jadi

16
00:01:16,920 --> 00:01:22,510
bagaimana dengan 100 dan itu terlihat cukup rapi bagi saya.

17
00:01:22,530 --> 00:01:26,790
Selain itu dan itu bukan tugas bagi pengguna, jangan khawatir jika Anda tidak

18
00:01:26,910 --> 00:01:31,840
melakukan itu, saya ingin mengubah warna mereka dan salah satu warna harus menjadi warna utama kami

19
00:01:31,950 --> 00:01:37,590
dan saya juga ingin mengatur beberapa aksen, beberapa warna sekunder sehingga bisa dikatakan mana yang bisa kita gunakan.

20
00:01:40,450 --> 00:01:46,810
Jadi untuk itu kembali di komponen layar mulai permainan, pada tombol itu sendiri, ada prop warna yang dapat

21
00:01:46,810 --> 00:01:48,530
Anda atur untuk mengontrol warna

22
00:01:48,550 --> 00:01:54,460
dan untuk Android, itulah warna latar belakang, untuk iOS yang akan menjadi warna teks dan sekarang reset

23
00:01:54,780 --> 00:02:00,250
tombol, di sana saya ingin mengatur warna # 717fc, itu warna yang bagus dan saya

24
00:02:00,340 --> 00:02:02,170
pikir untuk tombol utama, tombol konfirmasi,

25
00:02:02,170 --> 00:02:08,170
saya akan menggunakan tema utama saya dan saya ingin menggunakan warna yang sama yang saya gunakan di

26
00:02:08,170 --> 00:02:09,370
header. .

27
00:02:09,370 --> 00:02:12,960
Jadi di sana saya punya kode hex ini digunakan sebagai warna latar belakang, saya akan

28
00:02:13,030 --> 00:02:19,090
menggunakan warna yang sama di sini untuk tombol kedua ini sekarang. Dengan itu kita bisa menyimpan ini dan sekarang

29
00:02:19,210 --> 00:02:24,050
kita punya dua warna tombol di sini yang terlihat cukup bagus menurut saya.

30
00:02:24,070 --> 00:02:30,660
Sekarang satu kelemahan dari pendekatan ini atau satu hal yang dapat kita tingkatkan adalah bahwa saya menggunakan kode hex ini di

31
00:02:30,670 --> 00:02:34,080
sini, saya menggunakannya di header dan kemungkinan nantinya di aplikasi kita

32
00:02:34,090 --> 00:02:37,330
ingin menggunakan warna yang sama di tempat lain juga .

33
00:02:37,330 --> 00:02:41,380
Jadi alangkah baiknya jika kita dapat mengatur ini sebagai semacam tema yang

34
00:02:41,380 --> 00:02:48,340
dapat Anda katakan, bahwa kita dapat dengan mudah menggunakan warna-warna ini tanpa menyalin kode hex di aplikasi kita dan bahwa kita

35
00:02:48,340 --> 00:02:53,350
juga dapat mengubah warna di satu tempat jika kita ingin gunakan warna yang berbeda dan

36
00:02:53,350 --> 00:02:55,980
kita tidak perlu melakukannya di banyak komponen.

37
00:02:56,080 --> 00:03:01,830
Dan untuk itu saya akan menggunakan pendekatan di mana saya akan menambahkan folder baru di tingkat root dan saya akan memberi nama konstanta

38
00:03:01,840 --> 00:03:05,440
dan seperti biasa, Anda dapat memberi nama folder ini apa pun yang Anda inginkan

39
00:03:05,440 --> 00:03:11,640
dan di sana saya ingin memiliki warna. file js. Sekali lagi nama ini juga

40
00:03:11,670 --> 00:03:19,020
dapat dinamai apa pun yang Anda inginkan karena apa yang akan dilakukan file ini adalah akan mengekspor objek Javascript default, itu akan

41
00:03:19,050 --> 00:03:26,760
mengekspor objek Javascript dan di sana, Anda dapat memiliki pasangan nilai kunci yang Anda inginkan dan saya akan mengatur sebuah warna primer, jadi

42
00:03:26,820 --> 00:03:32,790
hanya primer sebagai nama kunci dan ini harus kode hex ini yang baru saja saya salin, jadi warna

43
00:03:32,790 --> 00:03:37,230
header ini juga aksen atau sekunder, apa pun yang Anda ingin beri nama,

44
00:03:37,230 --> 00:03:42,330
saya akan menggunakan warna aksen dan yang seharusnya menjadi warna lain ini yang saya gunakan

45
00:03:42,330 --> 00:03:47,070
pada tombol pertama, jadi kode hex ini di sini, saya akan menggunakannya di sini.

46
00:03:47,070 --> 00:03:52,920
Sekarang warna-warna ini didefinisikan di sini dan kita sekarang dapat mengimpornya dari file ini dan setiap kali kita mengubahnya di sini,

47
00:03:52,920 --> 00:03:58,700
mereka berubah di mana-mana dalam aplikasi ini dan oleh karena itu kita dapat dengan mudah menukar ini selama pengembangan.

48
00:03:58,740 --> 00:04:07,800
Jadi sekarang di layar mulai permainan, kita bisa melanjutkan dan mengimpor warna dari konstanta / Warna seperti ini dan saya memberi ini huruf C

49
00:04:08,050 --> 00:04:15,720
di sini untuk menunjukkan bahwa ini adalah kumpulan nilai, Anda dapat memberi nama ini apa pun yang Anda inginkan, Anda juga

50
00:04:15,730 --> 00:04:16,900
dapat menggunakan

51
00:04:16,900 --> 00:04:20,530
huruf kecil c, penamaan itu tidak masalah dan sekarang Anda

52
00:04:20,590 --> 00:04:23,980
dapat menggunakan warna di sini untuk menetapkan warna Anda.

53
00:04:24,010 --> 00:04:31,570
Jadi untuk tombol reset ini, kami sekarang akan menggunakan nilai dinamis sehingga kami dapat menjangkau warna. aksen dan di sini untuk tombol utama, untuk

54
00:04:32,050 --> 00:04:39,080
tombol konfirmasi, saya akan pergi dengan Warna. primer dan sama

55
00:04:39,080 --> 00:04:44,630
di header. Tentu saja, kami sekarang juga ingin menggunakan warna

56
00:04:45,020 --> 00:04:52,180
itu dan tidak menuliskannya di sini, alih-alih mengimpor warna dari konstanta / Warna dan dengan yang diimpor, Anda juga dapat

57
00:04:52,370 --> 00:04:57,680
menggunakannya dalam stylesheet, bukan hanya di jsx, Anda dapat menggunakannya di mana saja dalam file

58
00:04:57,680 --> 00:04:59,420
itu, jadi sekarang di

59
00:04:59,420 --> 00:05:05,680
sini, saya akan merujuk ke Warna. utama. Dan jika Anda menyimpannya, sekali lagi

60
00:05:05,720 --> 00:05:13,460
kami memiliki tampilan yang sama seperti sebelumnya tetapi sekali lagi dengan cara yang lebih elegan di mana jika Anda pernah memutuskan bahwa warna aksen Anda seharusnya

61
00:05:13,460 --> 00:05:19,790
bukan warna ini tetapi harus biru, Anda cukup menukarnya di sini, aplikasi Anda adalah dibangun kembali dan Anda memiliki tombol biru.

62
00:05:19,910 --> 00:05:26,630
Jadi itu adalah keuntungan besar dari mengelola warna Anda atau konstanta inti lainnya dalam file tersebut, Anda dapat memiliki

63
00:05:26,630 --> 00:05:34,910
file lain bernama teks misalnya di mana Anda memiliki beberapa ukuran font inti atau jarak file lain di mana Anda menyimpan nilai default untuk

64
00:05:34,940 --> 00:05:41,000
margin atau padding sehingga Anda tidak secara manual harus menggunakan nilai yang sama berulang-ulang, ini semua adalah

65
00:05:41,000 --> 00:05:42,550
pendekatan yang dapat

66
00:05:42,620 --> 00:05:47,690
Anda gunakan untuk membuat hidup Anda sebagai pengembang lebih mudah dan memiliki kode di

67
00:05:47,690 --> 00:05:50,900
mana Anda dapat dengan cepat bertukar nilai jika perlu.

68
00:05:50,990 --> 00:05:56,360
Untuk saat ini, saya hanya akan mengelola warna saya di sana karena itu adalah salah satu hal yang paling

69
00:05:56,360 --> 00:06:01,490
menjengkelkan untuk disalin dan karena itu merupakan pendekatan yang sangat bagus untuk mengelolanya dalam file seperti itu.