1
00:00:02,220 --> 00:00:04,630
Jadi sekarang kita memiliki header, kita

2
00:00:04,650 --> 00:00:10,950
dapat melanjutkan dan melanjutkan dengan bagian di mana pengguna dapat memasukkan nomor yang harus

3
00:00:10,950 --> 00:00:15,920
ditebak komputer setelahnya. Dan untuk ini di sini di app. File js, di

4
00:00:15,920 --> 00:00:22,790
bawah header, saya tentu ingin memiliki area input pengguna. Sekarang seperti sebelumnya, saya akan menangani ini

5
00:00:22,790 --> 00:00:29,780
dalam komponen terpisah dan tidak di sini di aplikasi. js untuk menjaga semua komponen relatif ramping dan kita bisa

6
00:00:29,780 --> 00:00:34,850
membuat komponen ini di sini di folder komponen, itu tidak akan salah tetapi karena

7
00:00:34,850 --> 00:00:42,110
sekarang saya akan bekerja pada komponen yang pada dasarnya bertanggung jawab atas semua yang kita lihat di layar selain header, saya

8
00:00:42,140 --> 00:00:47,600
memperlakukan komponen ini sebagai semacam komponen khusus, saya akan menamainya layar dan saya akan menyimpannya

9
00:00:47,600 --> 00:00:53,000
di folder layar karena permainan yang sudah selesai pada dasarnya akan memiliki tiga layar yang

10
00:00:53,000 --> 00:00:58,040
berbeda - satu untuk mengkonfigurasi dan memulai permainan, satu ketika permainan adalah berjalan dan

11
00:00:58,100 --> 00:01:04,520
satu ketika permainan selesai dan saya ingin memiliki komponen khusus ini yang secara teknis komponen yang benar-benar normal

12
00:01:04,730 --> 00:01:10,790
tetapi yang memenuhi tujuan khusus, saya ingin menyimpannya di folder terpisah dan itu hanya keputusan desain pribadi

13
00:01:10,790 --> 00:01:16,790
saya di sini, Anda tidak perlu menyimpannya. Secara teknis tidak ada alasan untuk melakukannya atau tidak

14
00:01:16,790 --> 00:01:18,750
melakukannya, React Native tidak peduli.

15
00:01:18,770 --> 00:01:24,200
Jadi di sini saya akan menyimpannya di sana dan saya akan beri nama StartGameScreen ini. Js juga membuatnya sangat jelas dalam nama

16
00:01:24,200 --> 00:01:30,740
bahwa ini adalah komponen khusus bagi saya tetapi seperti yang saya katakan, secara teknis itu adalah komponen normal dan

17
00:01:30,770 --> 00:01:37,580
oleh karena itu kami mengimpor Bereaksi dari Bereaksi dan kami juga akan mengimpor beberapa hal dari Bereaksi Asli tentu saja

18
00:01:37,880 --> 00:01:44,210
dan kami sudah bisa mengatakan bahwa kita pasti akan memerlukan tampilan karena Anda mungkin tidak dapat membangun komponen apa

19
00:01:44,210 --> 00:01:49,060
pun, well Anda bisa tetapi tidak banyak komponen yang dapat Anda bangun tanpa tampilan.

20
00:01:49,160 --> 00:01:54,620
Jadi kita akan mengimpor tampilan di sini dan kita pasti juga akan memerlukan stylesheet untuk beberapa gaya dan kita akan melihat apa lagi

21
00:01:54,620 --> 00:02:02,870
yang kita butuhkan, kita juga pasti akan membutuhkan teks yang kurasa sehingga kita sudah bisa menambahkannya. Sekarang dengan ini, saya akan membuat konstanta baru

22
00:02:03,500 --> 00:02:10,130
di sini, mulai layar permainan yang merupakan komponen fungsional yang tampak seperti ini,

23
00:02:10,130 --> 00:02:19,330
di mana kita akan memiliki objek gaya dengan Stylesheet. buat, seperti ini dan di mana saya kemudian ekspor layar mulai permainan seperti itu

24
00:02:19,450 --> 00:02:27,430
dan Anda dapat menyimpan ini sebagai jenis template untuk setiap komponen baru yang Anda tambahkan karena 90% komponen kustom yang Anda buat dalam React

25
00:02:27,430 --> 00:02:32,890
Native terlihat seperti ini pada dasarnya, Anda mengimpor React, Anda mengimpor beberapa barang dari React Native,

26
00:02:32,890 --> 00:02:39,280
Anda mendefinisikan komponen Anda, namanya berbeda tentu saja, Anda memiliki objek gaya Anda dan Anda mengekspornya, itu hampir selalu

27
00:02:39,310 --> 00:02:40,740
sama sehingga Anda

28
00:02:40,780 --> 00:02:46,740
dapat menyimpan jenis ini sebagai templat jika Anda mau. Saya tidak ingin ke sini, jadi saya

29
00:02:46,740 --> 00:02:52,800
akan terus bekerja dengan komponen itu sendiri dan pertanyaannya sekarang adalah, apa yang kita

30
00:02:52,800 --> 00:02:59,760
render di layar permulaan ini? Seperti apa seharusnya itu? Pada akhirnya di sana,

31
00:02:59,760 --> 00:03:06,960
saya akan memiliki tampilan pembungkus di sekitar seluruh layar saya karena saya pikir itu masuk

32
00:03:06,960 --> 00:03:14,040
akal, memungkinkan kita untuk mengatur beberapa gaya umum. Saya akan kembali menambahkan properti layar di sini ke objek stylesheet ini yang dapat saya

33
00:03:14,040 --> 00:03:18,420
lakukan, tidak akan berbenturan dengan yang ada di aplikasi. js, kita bisa juga memilih

34
00:03:18,420 --> 00:03:23,760
nama yang berbeda, keduanya sama sekali tidak terkait karena ini adalah objek Javascript independen

35
00:03:23,760 --> 00:03:29,790
yang pada akhirnya dikelola dalam file independen. Jadi kita dapat mengulangi nama di sini atau memilih nama yang berbeda, saya akan memilih nama

36
00:03:29,790 --> 00:03:36,390
yang mirip di sini, beri nama layar ini dan mengatur beberapa gaya umum untuk tampilan sekitar ini di sini. Gaya umum adalah bahwa saya mengatakan ini untuk melenturkan

37
00:03:36,390 --> 00:03:42,810
satu sehingga dibutuhkan semua ruang yang bisa didapat yang berarti bahwa karena saya akan menambahkannya di bawah tajuk,

38
00:03:42,810 --> 00:03:47,760
itu akan mengambil semua ruang di bawah tajuk, baik secara vertikal maupun horizontal

39
00:03:48,780 --> 00:03:55,350
dan selain itu , Saya juga ingin menambahkan beberapa padding di sini dari 10 sehingga konten tidak duduk

40
00:03:55,350 --> 00:04:01,470
langsung di tepi layar ini tetapi ada beberapa jarak ke kiri, kanan, atas dan bawah dan saya

41
00:04:01,470 --> 00:04:03,860
akan menambahkan item center tengah.

42
00:04:03,930 --> 00:04:09,900
Perlu diingat bahwa setiap tampilan secara default menggunakan flexbox dan secara default menggunakan kolom arah fleksibel,

43
00:04:09,930 --> 00:04:13,960
sejajarkan item yang diposisikan item di sepanjang sumbu silang, jadi

44
00:04:13,980 --> 00:04:18,240
karena arah default adalah kolom, sumbu silang dibiarkan ke kanan, jadi

45
00:04:18,240 --> 00:04:20,000
itu adalah sumbu

46
00:04:20,070 --> 00:04:25,380
horizontal, jadi ini akan menyelaraskan item di tengah secara horizontal tetapi tidak secara vertikal.

47
00:04:25,380 --> 00:04:31,200
Di sana kami menggunakan default mulai justifyContent flex tetapi karena saya

48
00:04:31,200 --> 00:04:39,210
menggunakan default, saya tidak perlu mengaturnya. Jadi kita hanya akan membiarkannya seperti di sini dan sekarang menetapkan gaya ini di sini untuk tampilan ini dan autoformatting

49
00:04:39,210 --> 00:04:41,600
menutup tag saya di sini yang tentu saja saya tidak ingin lakukan,

50
00:04:41,760 --> 00:04:42,830
jadi izinkan saya mengembalikan

51
00:04:43,140 --> 00:04:47,070
ini dan sekarang kami memiliki pandangan untuk kami layar game. Sekarang untuk melihat apakah itu berfungsi,

52
00:04:47,070 --> 00:04:49,220
saya hanya akan menampilkan beberapa teks di

53
00:04:49,320 --> 00:04:56,110
sini, layar permainan, hanya beberapa tempat penampung boneka. Memformat ulang itu dan sekarang di aplikasi. js, mari

54
00:04:56,530 --> 00:05:05,880
kita gunakan layar itu dengan mengimpor layar mulai permainan dari folder layar dan

55
00:05:05,880 --> 00:05:09,820
di sana, mulai layar permainan dan

56
00:05:09,890 --> 00:05:19,580
kemudian cukup tambahkan di sini, seperti ini. Jika kami menyimpan ini, kami melihat layar game di sini dan juga di Android, jadi ini

57
00:05:19,650 --> 00:05:20,250
berfungsi.

58
00:05:20,250 --> 00:05:27,270
Kami menggunakan komponen terpisah kedua ini yang sekarang akan kami gunakan sebagai komponen layar penuh pada dasarnya atau hampir

59
00:05:27,360 --> 00:05:28,420
layar penuh,

60
00:05:28,430 --> 00:05:30,420
bagian di bawah header pada akhirnya.