1 00:00:02,470 --> 00:00:05,140 Sekarang kita telah mengerjakan teks di 2 00:00:05,140 --> 00:00:11,250 sini, untuk yang sekarang kita dapat kembali ke aplikasi. js dan singkirkan perubahan sementara ini di sini di 3 00:00:11,250 --> 00:00:12,100 mana 4 00:00:12,100 --> 00:00:17,350 kami selalu menampilkan permainan di atas layar, kami tidak ingin melakukan itu lagi, alih-alih kami ingin 5 00:00:17,350 --> 00:00:24,790 memulai dengan layar mulai permainan normal lagi dan selain perubahan ini, saya sekarang juga ingin membuat satu penyesuaian ekstra dan itulah tombol 6 00:00:24,790 --> 00:00:25,720 mulai permainan ini. 7 00:00:25,810 --> 00:00:31,000 Kami menggunakan tombol normal di sini yang tentu saja adalah sesuatu yang dapat Anda lakukan tetapi kadang-kadang Anda juga 8 00:00:31,000 --> 00:00:35,910 ingin membuat tombol Anda sendiri, Anda ingin memiliki kontrol penuh atas bagaimana tombol Anda terlihat dan untuk 9 00:00:36,130 --> 00:00:40,610 ini, Anda tentu saja dapat membuat sendiri tombol dan itulah yang akan kita lakukan sekarang. 10 00:00:40,950 --> 00:00:45,700 Oleh karena itu di folder komponen, saya akan menambahkan tombol saya sendiri dan Anda dapat 11 00:00:45,700 --> 00:00:46,390 memberi 12 00:00:46,390 --> 00:00:49,400 nama ini apa pun yang Anda inginkan, Anda bisa menamainya 13 00:00:49,480 --> 00:00:56,740 tombol tapi itu semacam sudah nama built-in satu dan sementara Anda tentu saja masih bisa nama Anda seperti ini, untuk menghindari bentrokan nama 14 00:00:56,740 --> 00:01:04,330 atau kebingungan, saya akan memberi nama tombol saya di sini tombol utama karena itu akan menjadi utama saya, tombol utama saya yang saya gunakan 15 00:01:04,330 --> 00:01:05,710 untuk tindakan besar dalam 16 00:01:05,710 --> 00:01:07,480 permainan ini seperti memulai permainan baru. 17 00:01:07,720 --> 00:01:12,730 Nah, itu nama file di sana, kita akan memiliki komponen Bereaksi reguler tentu saja, karena 18 00:01:12,730 --> 00:01:14,470 itu kami mengimpor Bereaksi. 19 00:01:14,590 --> 00:01:18,160 Kami mengimpor tampilan di sini, kami pasti akan memerlukan 20 00:01:18,160 --> 00:01:23,960 beberapa teks, kami pasti akan memerlukan stylesheet dari React Native seperti ini dan kemudian di 21 00:01:24,160 --> 00:01:29,990 sini, kami memiliki komponen tombol utama yang menerima alat peraga dan yang pada akhirnya akan 22 00:01:29,990 --> 00:01:35,290 mengembalikan beberapa jsx. Kami akan memiliki objek gaya kami dengan Stylesheet. buat dan seperti 23 00:01:35,470 --> 00:01:39,310 biasa, kami akan mengekspor tombol utama kami. 24 00:01:39,310 --> 00:01:42,100 Dan sekarang pertanyaannya adalah, bagaimana Anda membangun tombol Anda sendiri? 25 00:01:42,110 --> 00:01:48,640 Sekarang mungkin terdengar sangat rumit untuk melakukan itu tetapi sebenarnya tidak. Tombol Anda sendiri juga hanya kombinasi tampilan dan teks 26 00:01:48,640 --> 00:01:56,890 dan sangat penting, juga komponen yang dapat disentuh, seperti highlight yang dapat disentuh atau opacity yang dapat disentuh atau umpan balik asli 27 00:01:56,890 --> 00:02:01,300 yang dapat disentuh atau bahkan disentuh tanpa umpan balik jika Anda 28 00:02:01,360 --> 00:02:06,940 tidak ingin memberikan umpan balik visual. Jadi di sini saya akan menggunakan opacity yang dapat 29 00:02:06,940 --> 00:02:13,690 disentuh dan kami membutuhkannya untuk memberikan umpan balik kepada pengguna mengenai fakta bahwa tombol itu ditekan dan untuk mendaftarkan acara onPress 30 00:02:14,320 --> 00:02:19,720 dan selain itu, kami hanya akan membangun tombol kami dengan tampilan yang kami gaya dengan cara tertentu 31 00:02:19,720 --> 00:02:21,370 dan teks di sana. 32 00:02:21,370 --> 00:02:29,330 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 33 00:02:29,330 --> 00:02:34,120 kemudian gaya tombol dan di sana, mungkin teks untuk teks yang harus memiliki tombol. 34 00:02:34,240 --> 00:02:39,680 Sekarang katakanlah tombol kita harus dapat digunakan sehingga kita melewati teks langsung antara tag 35 00:02:39,680 --> 00:02:41,600 pembuka dan penutup komponen 36 00:02:41,600 --> 00:02:46,030 kita, maka di sini kita dapat menggunakan alat peraga anak-anak sebagai teks 37 00:02:46,300 --> 00:02:55,990 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, 38 00:02:55,990 --> 00:03:04,860 kita bisa memiliki gaya tombol teks gaya dan nama-nama ini terserah Anda tentu saja dan pada opacity terjamah, saya akan menambahkan pendengar onPress 39 00:03:04,930 --> 00:03:07,920 dan kami Saya harus melakukan sesuatu di sana. 40 00:03:09,000 --> 00:03:11,430 Jadi sekarang kita mendapatkan kerangka untuk tombol kita, sekarang 41 00:03:11,450 --> 00:03:13,700 kita dapat mulai menambahkan beberapa gaya ke dalamnya. 42 00:03:13,790 --> 00:03:18,450 Sekarang tentu saja Anda dapat menata tombol itu dengan cara apa pun yang Anda inginkan, saya 43 00:03:18,470 --> 00:03:20,410 mendapatkan gaya tertentu di sini yang 44 00:03:20,420 --> 00:03:24,490 akan saya tambahkan lagi, pasti bermain-main dengan itu dan menerapkan gaya Anda sendiri. 45 00:03:24,530 --> 00:03:30,620 Jadi untuk tombol itu sendiri yang merupakan tampilan di sekitar teks, saya ingin memberikan tombol warna latar belakang tertentu 46 00:03:30,620 --> 00:03:34,850 dan Anda juga dapat memastikan bahwa ini dapat diatur dari luar tentu saja, Anda 47 00:03:42,270 --> 00:03:48,960 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 48 00:03:49,100 --> 00:03:55,710 konstanta / Warna, warna seperti ini dan kemudian di sini menggunakan warna warna primer, warna primer mungkin, seperti itu. 49 00:03:55,790 --> 00:04:00,380 Jadi itulah warna latar belakang yang harus dimiliki tombol ini, sekali lagi Anda juga bisa memastikan bahwa gaya 50 00:04:00,380 --> 00:04:04,090 ini diatur secara dinamis dengan bantuan beberapa penyangga yang Anda dapatkan dari luar, tetapi 51 00:04:04,160 --> 00:04:06,290 di sini, saya akan meng-hardcode-nya di sini. 52 00:04:06,290 --> 00:04:11,180 Selain itu, tombol harus memiliki beberapa padding sehingga teks tidak duduk langsung 53 00:04:11,270 --> 00:04:13,130 di tepi wadah tombol, 54 00:04:13,130 --> 00:04:19,310 sehingga kotak di sekitar teks tetapi ada beberapa spasi dan Anda dapat menggunakan padding yang 55 00:04:19,310 --> 00:04:22,590 sama di semua arah tapi saya ingin menggunakan 56 00:04:22,640 --> 00:04:29,300 padding vertikal 12, jadi tidak banyak padding ke atas dan bawah dan padding horizontal katakanlah 30, jadi 57 00:04:29,300 --> 00:04:32,550 lebih banyak padding ke kiri dan kanan. 58 00:04:32,710 --> 00:04:36,830 Itulah tombolnya, sekarang untuk teks tombol, ada juga warna putih yang seharusnya 59 00:04:36,880 --> 00:04:41,500 terlihat bagus pada warna primer kami, Anda bisa menggunakan hitam juga karena warna utama kami 60 00:04:41,500 --> 00:04:47,290 sebenarnya adalah warna di mana, seperti yang Anda lihat, putih dan putih. hitam benar-benar berfungsi, jadi Anda bisa menggunakan 61 00:04:47,410 --> 00:04:49,480 salah satu tapi saya akan pergi 62 00:04:49,480 --> 00:04:55,840 dengan putih di sini untuk tombol dan saya akan menambahkan keluarga font sans terbuka untuk menggunakan font kustom ini di sana 63 00:04:55,840 --> 00:05:01,780 juga, seperti yang Anda pelajari, Anda perlu mengatur ini pada setiap teks, tidak ada warisan, tidak ada font global yang 64 00:05:01,780 --> 00:05:07,150 dapat Anda atur, setiap teks yang harus menggunakan font ini perlu mendapatkannya dan saya akan menambahkan ukuran font 65 00:05:07,150 --> 00:05:15,840 katakanlah 18 untuk memiliki teks yang lebih besar di sini di tombol ini . Sekarang ketika tombol ditekan, maka saya sebenarnya tentu saja 66 00:05:15,840 --> 00:05:21,720 biasanya tidak ingin menangani acara pers ini di dalam tombol tetapi di dalam 67 00:05:21,720 --> 00:05:24,990 komponen di mana kita menggunakan tombol. 68 00:05:25,110 --> 00:05:27,160 Jadi saya hanya ingin meneruskannya dan 69 00:05:27,180 --> 00:05:33,330 untuk itu, kita bisa berharap untuk mendapatkan referensi fungsi, fungsi event handler pada misalkan onPress prop tombol kustom 70 00:05:33,330 --> 00:05:36,490 kami tetapi Anda bisa memberi nama prop ini apa 71 00:05:36,510 --> 00:05:41,670 pun, Anda bisa menamainya prop, Anda bisa menamainya onClick karena di pada akhirnya, Andalah yang 72 00:05:41,670 --> 00:05:42,510 menggunakan tombol 73 00:05:42,600 --> 00:05:48,540 Anda sendiri dan di sana Anda hanya perlu memastikan bahwa Anda melewatkan referensi fungsi fitting, pointer pas di 74 00:05:48,540 --> 00:05:54,310 fungsi event handler ke onPress atau apa pun yang Anda beri nama sesuai dengan tombol Anda sendiri. 75 00:05:54,360 --> 00:05:55,680 Jadi nama ini 76 00:05:55,680 --> 00:05:58,610 terserah Anda, sekarang mari kita gunakan tombol utama dan mari 77 00:05:58,610 --> 00:06:02,170 kita gunakan di layar mulai permainan. Di sana kita 78 00:06:02,190 --> 00:06:13,230 cukup mengimpornya, jadi impor tombol utama dari komponen / MainButton dan tombol utama ini sekarang digunakan di sini untuk memulai permainan 79 00:06:13,230 --> 00:06:14,170 baru. 80 00:06:14,230 --> 00:06:16,980 Jadi saya akan mengganti tombol di sini 81 00:06:16,980 --> 00:06:23,610 dengan tombol utama tetapi perlu diingat bahwa pada tombol ini, saya mengkonfigurasi konten, teks yang akan ditampilkan 82 00:06:23,610 --> 00:06:31,440 sehingga sebenarnya konten yang dilewati antara tag pembuka dan penutup tombol kami dan oleh karena itu kembali di layar mulai permainan, 83 00:06:31,440 --> 00:06:32,790 judul di sini 84 00:06:32,790 --> 00:06:38,760 tidak lagi diberikan pada prop judul tetapi sebaliknya, sekarang kami memiliki tag pembuka dan penutup untuk 85 00:06:38,760 --> 00:06:42,730 tombol kami sendiri dan kami menambahkan mulai permainan di sana. 86 00:06:44,110 --> 00:06:50,170 Sekarang onPress masih merupakan prop yang kita tinggalkan di sini karena di tombol utama, saya meneruskan event onPress sehingga bisa 87 00:06:50,230 --> 00:06:54,520 dikatakan, ke fungsi yang saya dapatkan di prop onPress saya sendiri di sini, oleh karena 88 00:06:54,520 --> 00:07:00,870 itu kita harus mengatur prop onPress pada tombol kita sendiri dan oleh karena itu dengan itu, kita harus memiliki tombol utama yang 89 00:07:00,870 --> 00:07:04,500 bagus di sini, tombol yang bagus ketika kita memulai permainan baru. 90 00:07:07,840 --> 00:07:09,280 Mari kita coba di 91 00:07:09,310 --> 00:07:13,680 sini, beginilah tampilannya dan itu terlihat cukup bagus menurut saya, tombol yang bagus. 92 00:07:13,900 --> 00:07:15,080 Saya belum selesai, 93 00:07:15,220 --> 00:07:19,360 saya ingin memiliki sudut bulat pada tombol itu dan untuk itu, kembali 94 00:07:19,360 --> 00:07:24,640 ke file tombol utama, kita tentu saja bisa pergi ke properti tombol ini di sini 95 00:07:24,640 --> 00:07:32,650 di stylesheet yang merupakan objek gaya yang diterapkan ke kita lihat dan di sana, kita dapat menambahkan radius batas 25 dan jika kita 96 00:07:32,650 --> 00:07:39,210 melakukannya, maka Anda akan melihat bahwa jika saya sekarang mendapatkan tombol ini, sekarang memiliki tampilan yang bagus di sini. 97 00:07:39,450 --> 00:07:45,580 Biarkan Anda juga menunjukkannya di Android, sekarang memiliki sudut membulat dan memiliki efek opacity yang bagus ini ketika Anda 98 00:07:45,580 --> 00:07:46,120 mengetuknya 99 00:07:46,270 --> 00:07:51,680 dan dengan cara seperti yang disebutkan sebelumnya, Anda dapat mengubah efek opacity ini dengan membuka komponen 100 00:07:51,730 --> 00:07:58,080 opacity yang dapat disentuh dan di sana, Anda dapat atur opacity aktif ke level opacity yang ingin Anda miliki ketika 101 00:07:58,120 --> 00:07:59,090 ditekan, misalnya jika 102 00:07:59,140 --> 00:08:04,040 Anda menggunakan nilai yang agak tinggi di sini, maka efek ini kurang kuat, sekarang 103 00:08:04,060 --> 00:08:10,930 hanya sedikit transparan ketika kita mengetuknya dan tidak setransparan sebelum. Tapi itu sepenuhnya terserah Anda apa yang Anda inginkan 104 00:08:10,930 --> 00:08:11,980 di sini, 105 00:08:11,980 --> 00:08:15,530 saya akan pergi untuk. 6 di sini untuk memiliki efek 106 00:08:15,610 --> 00:08:21,130 yang sedikit lebih kuat tetapi sekali lagi itu adalah sesuatu yang dapat Anda konfigurasikan dan secara umum, saran saya adalah Anda bermain-main dengan 107 00:08:21,130 --> 00:08:28,950 itu dan melihat bagaimana Anda dapat mendesain tombol itu, bagaimana Anda dapat menyesuaikannya dengan kebutuhan Anda. Sekarang dengan tombol kustom ditambahkan, saya juga ingin 108 00:08:28,950 --> 00:08:31,140 menggunakannya di game over 109 00:08:31,140 --> 00:08:33,170 screen, jadi di 110 00:08:33,270 --> 00:08:42,380 sana, saya juga akan mengimpor tombol utama dari komponen / MainButton seperti ini dan kemudian cukup menambahkan tombol 111 00:08:42,610 --> 00:08:49,110 utama di sini ketika kami menunjukkan tombol permainan baru kami di sana. 112 00:08:49,120 --> 00:08:53,620 Gunakan tombol utama sebagai gantinya, oleh karena itu hapus prop judul karena itu 113 00:08:53,620 --> 00:08:55,710 bukan bagaimana kami mengatur judul 114 00:08:55,720 --> 00:09:02,840 pada tombol kustom kami sendiri, sebaliknya kami harus meneruskannya di sini antara tag pembuka dan penutup dari tag komponen kustom kami. 115 00:09:03,040 --> 00:09:11,950 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 116 00:09:11,950 --> 00:09:13,540 sini kita berada dan 117 00:09:17,550 --> 00:09:20,730 sekarang kita melihat tombol yang bagus di sini juga. 118 00:09:20,730 --> 00:09:24,540 Kami juga melihat output yang benar di sini mengenai jumlah putaran 119 00:09:24,540 --> 00:09:25,440 yang dibutuhkan 120 00:09:25,440 --> 00:09:30,510 dan jumlah yang harus kami tebak dan kami dapat memulai permainan baru sesudahnya dan juga 121 00:09:36,440 --> 00:09:44,900 melalui itu lagi dengan sangat cepat, ya, itu semua terlihat sangat bagus. 122 00:09:44,900 --> 00:09:46,520 Hal yang masih ingin saya lakukan sekarang adalah saya ingin mengerjakan dua tombol ini, lebih rendah dan lebih besar. 123 00:09:46,520 --> 00:09:48,230 Mereka terlihat agak membosankan, 124 00:09:48,290 --> 00:09:54,200 kataku, kita tentu bisa membuat mereka terlihat lebih menarik. Sekarang salah satu cara untuk membuatnya terlihat lebih menarik adalah 125 00:09:54,200 --> 00:09:56,690 kita menggunakan tombol kustom kita di sana. 126 00:09:57,020 --> 00:10:04,710 Jadi tentu saja di sini di layar permainan, kita juga dapat mengimpor tombol utama dari komponen / MainButton, jadi tombol kustom 127 00:10:04,730 --> 00:10:09,650 kita sendiri dan gunakan itu alih-alih tombol yang kita gunakan saat ini, yang 128 00:10:09,660 --> 00:10:12,070 merupakan bawaan. Jadi gunakan 129 00:10:12,200 --> 00:10:17,770 tombol kita sendiri di sini, karena itu tentu saja memindahkan judul antara tag 130 00:10:17,870 --> 00:10:24,710 pembuka dan penutup, jadi di sini lebih rendah dan di sini untuk tombol kedua, itu lebih besar 131 00:10:25,220 --> 00:10:31,610 dan sekarang ini akan terlihat sedikit lebih bagus jika kita memulai permainan baru di sini . 132 00:10:31,640 --> 00:10:35,470 Sekarang kita menggunakan tombol kustom kita di sini, meskipun sekarang kita juga 133 00:10:35,590 --> 00:10:39,440 melihat masalah, ada sedikit terlalu besar, ada terlalu dekat satu sama lain, 134 00:10:39,530 --> 00:10:44,540 kita dapat mengubahnya dengan pergi ke wadah tombol dan memberikan ini sedikit lebih lebar, mungkin 135 00:10:44,540 --> 00:10:47,550 atur lebar maks ke 90% di sini sebenarnya. 136 00:10:47,560 --> 00:10:53,490 Jadi sekarang jika kita coba ini lagi, ya itu terlihat sedikit lebih baik, setidaknya ada beberapa jarak antara tombol dan 137 00:10:53,490 --> 00:10:58,380 untuk saat ini akan dilakukan karena untuk saat ini, kami tidak mengoptimalkan untuk semua ukuran layar. 138 00:10:58,530 --> 00:11:04,140 Mari kita tambahkan juga lebar ini ke 400 sehingga kita memiliki cukup lebar, kita benar-benar 139 00:11:04,140 --> 00:11:09,160 menggunakan 400 piksel dan sekarang ini terlihat bagus di sini di iOS dan 140 00:11:12,590 --> 00:11:15,880 juga di Android. Sekarang terlihat sedikit lebih baik 141 00:11:15,890 --> 00:11:22,700 seperti yang saya sebutkan tetapi bukankah lebih baik jika kita memiliki ikon di sana, daripada teks karena teks tentu saja bekerja tetapi ikon juga 142 00:11:22,700 --> 00:11:24,650 dapat melakukan trik dan kita belum 143 00:11:24,650 --> 00:11:30,830 menggunakan ikon sejauh ini sejak Anda sering membutuhkannya di aplikasi seluler. Ini jelas sesuatu yang juga harus Anda waspadai, Anda 144 00:11:30,830 --> 00:11:36,980 harus tahu cara bekerja dengan ikon, cara menambahkan ikon di dalam aplikasi Anda dan oleh karena itu 145 00:11:36,980 --> 00:11:39,370 apa yang akan kita lakukan selanjutnya.