Sekarang kita memiliki tampilan kartu, sekarang sebagai hal berikutnya mari kita perbaiki tombol dan itu adalah sesuatu yang sudah saya
tunjukkan kepada Anda, jadi pasti kesempatan Anda untuk menjeda video dan melakukannya sendiri.
Saya ingin memastikan bahwa tombol memiliki ukuran yang sama, mereka tidak boleh mengambil lebar penuh
yang tersedia tetapi mereka harus memiliki ukuran yang sama yang memastikan bahwa teks sesuai di sana dan mereka
berukuran sama.
Jadi kesempatan Anda untuk menjeda video, setelah itu kami akan melakukan ini bersama. Apakah kamu berhasil?
Mari kita pastikan tombol memiliki ukuran yang sama dan untuk ini di layar permulaan permainan di mana saya
memiliki tombol, Anda belajar bahwa solusinya adalah untuk membungkus tombol dalam tampilan. Jadi Anda harus menambahkan komponen tampilan Anda sendiri di sekitar
tombol dan sekarang Anda
dapat menetapkan gaya untuk tombol ini, jadi untuk kedua tombol di sini dan saya akan menggunakan objek tombol di objek
gaya saya di sana, jadi mari kita
tambahkan tombol di sini dan cukup beri lebar dan di sini, lebar yang akan saya pilih adalah katakanlah 80.
Mari kita lihat seperti apa ini, jika saya menyimpan ini, agak terlalu kecil karena sepertinya ada jeda baris
pada tombol ini.
Jadi mari kita lanjutkan dengan 120, sekarang sudah pasti terlalu banyak, jadi
bagaimana dengan 100 dan itu terlihat cukup rapi bagi saya.
Selain itu dan itu bukan tugas bagi pengguna, jangan khawatir jika Anda tidak
melakukan itu, saya ingin mengubah warna mereka dan salah satu warna harus menjadi warna utama kami
dan saya juga ingin mengatur beberapa aksen, beberapa warna sekunder sehingga bisa dikatakan mana yang bisa kita gunakan.
Jadi untuk itu kembali di komponen layar mulai permainan, pada tombol itu sendiri, ada prop warna yang dapat
Anda atur untuk mengontrol warna
dan untuk Android, itulah warna latar belakang, untuk iOS yang akan menjadi warna teks dan sekarang reset
tombol, di sana saya ingin mengatur warna # 717fc, itu warna yang bagus dan saya
pikir untuk tombol utama, tombol konfirmasi,
saya akan menggunakan tema utama saya dan saya ingin menggunakan warna yang sama yang saya gunakan di
header. .
Jadi di sana saya punya kode hex ini digunakan sebagai warna latar belakang, saya akan
menggunakan warna yang sama di sini untuk tombol kedua ini sekarang. Dengan itu kita bisa menyimpan ini dan sekarang
kita punya dua warna tombol di sini yang terlihat cukup bagus menurut saya.
Sekarang satu kelemahan dari pendekatan ini atau satu hal yang dapat kita tingkatkan adalah bahwa saya menggunakan kode hex ini di
sini, saya menggunakannya di header dan kemungkinan nantinya di aplikasi kita
ingin menggunakan warna yang sama di tempat lain juga .
Jadi alangkah baiknya jika kita dapat mengatur ini sebagai semacam tema yang
dapat Anda katakan, bahwa kita dapat dengan mudah menggunakan warna-warna ini tanpa menyalin kode hex di aplikasi kita dan bahwa kita
juga dapat mengubah warna di satu tempat jika kita ingin gunakan warna yang berbeda dan
kita tidak perlu melakukannya di banyak komponen.
Dan untuk itu saya akan menggunakan pendekatan di mana saya akan menambahkan folder baru di tingkat root dan saya akan memberi nama konstanta
dan seperti biasa, Anda dapat memberi nama folder ini apa pun yang Anda inginkan
dan di sana saya ingin memiliki warna. file js. Sekali lagi nama ini juga
dapat dinamai apa pun yang Anda inginkan karena apa yang akan dilakukan file ini adalah akan mengekspor objek Javascript default, itu akan
mengekspor objek Javascript dan di sana, Anda dapat memiliki pasangan nilai kunci yang Anda inginkan dan saya akan mengatur sebuah warna primer, jadi
hanya primer sebagai nama kunci dan ini harus kode hex ini yang baru saja saya salin, jadi warna
header ini juga aksen atau sekunder, apa pun yang Anda ingin beri nama,
saya akan menggunakan warna aksen dan yang seharusnya menjadi warna lain ini yang saya gunakan
pada tombol pertama, jadi kode hex ini di sini, saya akan menggunakannya di sini.
Sekarang warna-warna ini didefinisikan di sini dan kita sekarang dapat mengimpornya dari file ini dan setiap kali kita mengubahnya di sini,
mereka berubah di mana-mana dalam aplikasi ini dan oleh karena itu kita dapat dengan mudah menukar ini selama pengembangan.
Jadi sekarang di layar mulai permainan, kita bisa melanjutkan dan mengimpor warna dari konstanta / Warna seperti ini dan saya memberi ini huruf C
di sini untuk menunjukkan bahwa ini adalah kumpulan nilai, Anda dapat memberi nama ini apa pun yang Anda inginkan, Anda juga
dapat menggunakan
huruf kecil c, penamaan itu tidak masalah dan sekarang Anda
dapat menggunakan warna di sini untuk menetapkan warna Anda.
Jadi untuk tombol reset ini, kami sekarang akan menggunakan nilai dinamis sehingga kami dapat menjangkau warna. aksen dan di sini untuk tombol utama, untuk
tombol konfirmasi, saya akan pergi dengan Warna. primer dan sama
di header. Tentu saja, kami sekarang juga ingin menggunakan warna
itu dan tidak menuliskannya di sini, alih-alih mengimpor warna dari konstanta / Warna dan dengan yang diimpor, Anda juga dapat
menggunakannya dalam stylesheet, bukan hanya di jsx, Anda dapat menggunakannya di mana saja dalam file
itu, jadi sekarang di
sini, saya akan merujuk ke Warna. utama. Dan jika Anda menyimpannya, sekali lagi
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
bukan warna ini tetapi harus biru, Anda cukup menukarnya di sini, aplikasi Anda adalah dibangun kembali dan Anda memiliki tombol biru.
Jadi itu adalah keuntungan besar dari mengelola warna Anda atau konstanta inti lainnya dalam file tersebut, Anda dapat memiliki
file lain bernama teks misalnya di mana Anda memiliki beberapa ukuran font inti atau jarak file lain di mana Anda menyimpan nilai default untuk
margin atau padding sehingga Anda tidak secara manual harus menggunakan nilai yang sama berulang-ulang, ini semua adalah
pendekatan yang dapat
Anda gunakan untuk membuat hidup Anda sebagai pengembang lebih mudah dan memiliki kode di
mana Anda dapat dengan cepat bertukar nilai jika perlu.
Untuk saat ini, saya hanya akan mengelola warna saya di sana karena itu adalah salah satu hal yang paling
menjengkelkan untuk disalin dan karena itu merupakan pendekatan yang sangat bagus untuk mengelolanya dalam file seperti itu.