Sekarang kita telah mengerjakan teks di
sini, untuk yang sekarang kita dapat kembali ke aplikasi. js dan singkirkan perubahan sementara ini di sini di
mana
kami selalu menampilkan permainan di atas layar, kami tidak ingin melakukan itu lagi, alih-alih kami ingin
memulai dengan layar mulai permainan normal lagi dan selain perubahan ini, saya sekarang juga ingin membuat satu penyesuaian ekstra dan itulah tombol
mulai permainan ini.
Kami menggunakan tombol normal di sini yang tentu saja adalah sesuatu yang dapat Anda lakukan tetapi kadang-kadang Anda juga
ingin membuat tombol Anda sendiri, Anda ingin memiliki kontrol penuh atas bagaimana tombol Anda terlihat dan untuk
ini, Anda tentu saja dapat membuat sendiri tombol dan itulah yang akan kita lakukan sekarang.
Oleh karena itu di folder komponen, saya akan menambahkan tombol saya sendiri dan Anda dapat
memberi
nama ini apa pun yang Anda inginkan, Anda bisa menamainya
tombol tapi itu semacam sudah nama built-in satu dan sementara Anda tentu saja masih bisa nama Anda seperti ini, untuk menghindari bentrokan nama
atau kebingungan, saya akan memberi nama tombol saya di sini tombol utama karena itu akan menjadi utama saya, tombol utama saya yang saya gunakan
untuk tindakan besar dalam
permainan ini seperti memulai permainan baru.
Nah, itu nama file di sana, kita akan memiliki komponen Bereaksi reguler tentu saja, karena
itu kami mengimpor Bereaksi.
Kami mengimpor tampilan di sini, kami pasti akan memerlukan
beberapa teks, kami pasti akan memerlukan stylesheet dari React Native seperti ini dan kemudian di
sini, kami memiliki komponen tombol utama yang menerima alat peraga dan yang pada akhirnya akan
mengembalikan beberapa jsx. Kami akan memiliki objek gaya kami dengan Stylesheet. buat dan seperti
biasa, kami akan mengekspor tombol utama kami.
Dan sekarang pertanyaannya adalah, bagaimana Anda membangun tombol Anda sendiri?
Sekarang mungkin terdengar sangat rumit untuk melakukan itu tetapi sebenarnya tidak. Tombol Anda sendiri juga hanya kombinasi tampilan dan teks
dan sangat penting, juga komponen yang dapat disentuh, seperti highlight yang dapat disentuh atau opacity yang dapat disentuh atau umpan balik asli
yang dapat disentuh atau bahkan disentuh tanpa umpan balik jika Anda
tidak ingin memberikan umpan balik visual. Jadi di sini saya akan menggunakan opacity yang dapat
disentuh dan kami membutuhkannya untuk memberikan umpan balik kepada pengguna mengenai fakta bahwa tombol itu ditekan dan untuk mendaftarkan acara onPress
dan selain itu, kami hanya akan membangun tombol kami dengan tampilan yang kami gaya dengan cara tertentu
dan teks di sana.
Jadi sekarang di sini di tombol utama, kita dapat mengembalikan opacity kita yang dapat disentuh dan di sana, memiliki pandangan yang dapat kita gunakan untuk
kemudian gaya tombol dan di sana, mungkin teks untuk teks yang harus memiliki tombol.
Sekarang katakanlah tombol kita harus dapat digunakan sehingga kita melewati teks langsung antara tag
pembuka dan penutup komponen
kita, maka di sini kita dapat menggunakan alat peraga anak-anak sebagai teks
yang ingin saya perlihatkan pada tombol dan kemudian di sini pada tampilan ini, saya Akan memiliki gaya katakanlah tombol gaya, pada teks dalam ini di sini,
kita bisa memiliki gaya tombol teks gaya dan nama-nama ini terserah Anda tentu saja dan pada opacity terjamah, saya akan menambahkan pendengar onPress
dan kami Saya harus melakukan sesuatu di sana.
Jadi sekarang kita mendapatkan kerangka untuk tombol kita, sekarang
kita dapat mulai menambahkan beberapa gaya ke dalamnya.
Sekarang tentu saja Anda dapat menata tombol itu dengan cara apa pun yang Anda inginkan, saya
mendapatkan gaya tertentu di sini yang
akan saya tambahkan lagi, pasti bermain-main dengan itu dan menerapkan gaya Anda sendiri.
Jadi untuk tombol itu sendiri yang merupakan tampilan di sekitar teks, saya ingin memberikan tombol warna latar belakang tertentu
dan Anda juga dapat memastikan bahwa ini dapat diatur dari luar tentu saja, Anda
bisa menjadi sangat kreatif di sini. Saya akan hardcode warna di sini tentu saja menggunakan warna saya konstan di sini. Jadi saya akan mengimpor warna dari
konstanta / Warna, warna seperti ini dan kemudian di sini menggunakan warna warna primer, warna primer mungkin, seperti itu.
Jadi itulah warna latar belakang yang harus dimiliki tombol ini, sekali lagi Anda juga bisa memastikan bahwa gaya
ini diatur secara dinamis dengan bantuan beberapa penyangga yang Anda dapatkan dari luar, tetapi
di sini, saya akan meng-hardcode-nya di sini.
Selain itu, tombol harus memiliki beberapa padding sehingga teks tidak duduk langsung
di tepi wadah tombol,
sehingga kotak di sekitar teks tetapi ada beberapa spasi dan Anda dapat menggunakan padding yang
sama di semua arah tapi saya ingin menggunakan
padding vertikal 12, jadi tidak banyak padding ke atas dan bawah dan padding horizontal katakanlah 30, jadi
lebih banyak padding ke kiri dan kanan.
Itulah tombolnya, sekarang untuk teks tombol, ada juga warna putih yang seharusnya
terlihat bagus pada warna primer kami, Anda bisa menggunakan hitam juga karena warna utama kami
sebenarnya adalah warna di mana, seperti yang Anda lihat, putih dan putih. hitam benar-benar berfungsi, jadi Anda bisa menggunakan
salah satu tapi saya akan pergi
dengan putih di sini untuk tombol dan saya akan menambahkan keluarga font sans terbuka untuk menggunakan font kustom ini di sana
juga, seperti yang Anda pelajari, Anda perlu mengatur ini pada setiap teks, tidak ada warisan, tidak ada font global yang
dapat Anda atur, setiap teks yang harus menggunakan font ini perlu mendapatkannya dan saya akan menambahkan ukuran font
katakanlah 18 untuk memiliki teks yang lebih besar di sini di tombol ini . Sekarang ketika tombol ditekan, maka saya sebenarnya tentu saja
biasanya tidak ingin menangani acara pers ini di dalam tombol tetapi di dalam
komponen di mana kita menggunakan tombol.
Jadi saya hanya ingin meneruskannya dan
untuk itu, kita bisa berharap untuk mendapatkan referensi fungsi, fungsi event handler pada misalkan onPress prop tombol kustom
kami tetapi Anda bisa memberi nama prop ini apa
pun, Anda bisa menamainya prop, Anda bisa menamainya onClick karena di pada akhirnya, Andalah yang
menggunakan tombol
Anda sendiri dan di sana Anda hanya perlu memastikan bahwa Anda melewatkan referensi fungsi fitting, pointer pas di
fungsi event handler ke onPress atau apa pun yang Anda beri nama sesuai dengan tombol Anda sendiri.
Jadi nama ini
terserah Anda, sekarang mari kita gunakan tombol utama dan mari
kita gunakan di layar mulai permainan. Di sana kita
cukup mengimpornya, jadi impor tombol utama dari komponen / MainButton dan tombol utama ini sekarang digunakan di sini untuk memulai permainan
baru.
Jadi saya akan mengganti tombol di sini
dengan tombol utama tetapi perlu diingat bahwa pada tombol ini, saya mengkonfigurasi konten, teks yang akan ditampilkan
sehingga sebenarnya konten yang dilewati antara tag pembuka dan penutup tombol kami dan oleh karena itu kembali di layar mulai permainan,
judul di sini
tidak lagi diberikan pada prop judul tetapi sebaliknya, sekarang kami memiliki tag pembuka dan penutup untuk
tombol kami sendiri dan kami menambahkan mulai permainan di sana.
Sekarang onPress masih merupakan prop yang kita tinggalkan di sini karena di tombol utama, saya meneruskan event onPress sehingga bisa
dikatakan, ke fungsi yang saya dapatkan di prop onPress saya sendiri di sini, oleh karena
itu kita harus mengatur prop onPress pada tombol kita sendiri dan oleh karena itu dengan itu, kita harus memiliki tombol utama yang
bagus di sini, tombol yang bagus ketika kita memulai permainan baru.
Mari kita coba di
sini, beginilah tampilannya dan itu terlihat cukup bagus menurut saya, tombol yang bagus.
Saya belum selesai,
saya ingin memiliki sudut bulat pada tombol itu dan untuk itu, kembali
ke file tombol utama, kita tentu saja bisa pergi ke properti tombol ini di sini
di stylesheet yang merupakan objek gaya yang diterapkan ke kita lihat dan di sana, kita dapat menambahkan radius batas 25 dan jika kita
melakukannya, maka Anda akan melihat bahwa jika saya sekarang mendapatkan tombol ini, sekarang memiliki tampilan yang bagus di sini.
Biarkan Anda juga menunjukkannya di Android, sekarang memiliki sudut membulat dan memiliki efek opacity yang bagus ini ketika Anda
mengetuknya
dan dengan cara seperti yang disebutkan sebelumnya, Anda dapat mengubah efek opacity ini dengan membuka komponen
opacity yang dapat disentuh dan di sana, Anda dapat atur opacity aktif ke level opacity yang ingin Anda miliki ketika
ditekan, misalnya jika
Anda menggunakan nilai yang agak tinggi di sini, maka efek ini kurang kuat, sekarang
hanya sedikit transparan ketika kita mengetuknya dan tidak setransparan sebelum. Tapi itu sepenuhnya terserah Anda apa yang Anda inginkan
di sini,
saya akan pergi untuk. 6 di sini untuk memiliki efek
yang sedikit lebih kuat tetapi sekali lagi itu adalah sesuatu yang dapat Anda konfigurasikan dan secara umum, saran saya adalah Anda bermain-main dengan
itu dan melihat bagaimana Anda dapat mendesain tombol itu, bagaimana Anda dapat menyesuaikannya dengan kebutuhan Anda. Sekarang dengan tombol kustom ditambahkan, saya juga ingin
menggunakannya di game over
screen, jadi di
sana, saya juga akan mengimpor tombol utama dari komponen / MainButton seperti ini dan kemudian cukup menambahkan tombol
utama di sini ketika kami menunjukkan tombol permainan baru kami di sana.
Gunakan tombol utama sebagai gantinya, oleh karena itu hapus prop judul karena itu
bukan bagaimana kami mengatur judul
pada tombol kustom kami sendiri, sebaliknya kami harus meneruskannya di sini antara tag pembuka dan penutup dari tag komponen kustom kami.
Jadi karena itu sekarang di sini, ini juga akan terlihat lebih bagus jika kita cepat menyelesaikan permainan di sini, mencoba membiarkan komputer menebak 33, di
sini kita berada dan
sekarang kita melihat tombol yang bagus di sini juga.
Kami juga melihat output yang benar di sini mengenai jumlah putaran
yang dibutuhkan
dan jumlah yang harus kami tebak dan kami dapat memulai permainan baru sesudahnya dan juga
melalui itu lagi dengan sangat cepat, ya, itu semua terlihat sangat bagus.
Hal yang masih ingin saya lakukan sekarang adalah saya ingin mengerjakan dua tombol ini, lebih rendah dan lebih besar.
Mereka terlihat agak membosankan,
kataku, kita tentu bisa membuat mereka terlihat lebih menarik. Sekarang salah satu cara untuk membuatnya terlihat lebih menarik adalah
kita menggunakan tombol kustom kita di sana.
Jadi tentu saja di sini di layar permainan, kita juga dapat mengimpor tombol utama dari komponen / MainButton, jadi tombol kustom
kita sendiri dan gunakan itu alih-alih tombol yang kita gunakan saat ini, yang
merupakan bawaan. Jadi gunakan
tombol kita sendiri di sini, karena itu tentu saja memindahkan judul antara tag
pembuka dan penutup, jadi di sini lebih rendah dan di sini untuk tombol kedua, itu lebih besar
dan sekarang ini akan terlihat sedikit lebih bagus jika kita memulai permainan baru di sini .
Sekarang kita menggunakan tombol kustom kita di sini, meskipun sekarang kita juga
melihat masalah, ada sedikit terlalu besar, ada terlalu dekat satu sama lain,
kita dapat mengubahnya dengan pergi ke wadah tombol dan memberikan ini sedikit lebih lebar, mungkin
atur lebar maks ke 90% di sini sebenarnya.
Jadi sekarang jika kita coba ini lagi, ya itu terlihat sedikit lebih baik, setidaknya ada beberapa jarak antara tombol dan
untuk saat ini akan dilakukan karena untuk saat ini, kami tidak mengoptimalkan untuk semua ukuran layar.
Mari kita tambahkan juga lebar ini ke 400 sehingga kita memiliki cukup lebar, kita benar-benar
menggunakan 400 piksel dan sekarang ini terlihat bagus di sini di iOS dan
juga di Android. Sekarang terlihat sedikit lebih baik
seperti yang saya sebutkan tetapi bukankah lebih baik jika kita memiliki ikon di sana, daripada teks karena teks tentu saja bekerja tetapi ikon juga
dapat melakukan trik dan kita belum
menggunakan ikon sejauh ini sejak Anda sering membutuhkannya di aplikasi seluler. Ini jelas sesuatu yang juga harus Anda waspadai, Anda
harus tahu cara bekerja dengan ikon, cara menambahkan ikon di dalam aplikasi Anda dan oleh karena itu
apa yang akan kita lakukan selanjutnya.