Jadi sekarang kita memiliki header, kita
dapat melanjutkan dan melanjutkan dengan bagian di mana pengguna dapat memasukkan nomor yang harus
ditebak komputer setelahnya. Dan untuk ini di sini di app. File js, di
bawah header, saya tentu ingin memiliki area input pengguna. Sekarang seperti sebelumnya, saya akan menangani ini
dalam komponen terpisah dan tidak di sini di aplikasi. js untuk menjaga semua komponen relatif ramping dan kita bisa
membuat komponen ini di sini di folder komponen, itu tidak akan salah tetapi karena
sekarang saya akan bekerja pada komponen yang pada dasarnya bertanggung jawab atas semua yang kita lihat di layar selain header, saya
memperlakukan komponen ini sebagai semacam komponen khusus, saya akan menamainya layar dan saya akan menyimpannya
di folder layar karena permainan yang sudah selesai pada dasarnya akan memiliki tiga layar yang
berbeda - satu untuk mengkonfigurasi dan memulai permainan, satu ketika permainan adalah berjalan dan
satu ketika permainan selesai dan saya ingin memiliki komponen khusus ini yang secara teknis komponen yang benar-benar normal
tetapi yang memenuhi tujuan khusus, saya ingin menyimpannya di folder terpisah dan itu hanya keputusan desain pribadi
saya di sini, Anda tidak perlu menyimpannya. Secara teknis tidak ada alasan untuk melakukannya atau tidak
melakukannya, React Native tidak peduli.
Jadi di sini saya akan menyimpannya di sana dan saya akan beri nama StartGameScreen ini. Js juga membuatnya sangat jelas dalam nama
bahwa ini adalah komponen khusus bagi saya tetapi seperti yang saya katakan, secara teknis itu adalah komponen normal dan
oleh karena itu kami mengimpor Bereaksi dari Bereaksi dan kami juga akan mengimpor beberapa hal dari Bereaksi Asli tentu saja
dan kami sudah bisa mengatakan bahwa kita pasti akan memerlukan tampilan karena Anda mungkin tidak dapat membangun komponen apa
pun, well Anda bisa tetapi tidak banyak komponen yang dapat Anda bangun tanpa tampilan.
Jadi kita akan mengimpor tampilan di sini dan kita pasti juga akan memerlukan stylesheet untuk beberapa gaya dan kita akan melihat apa lagi
yang kita butuhkan, kita juga pasti akan membutuhkan teks yang kurasa sehingga kita sudah bisa menambahkannya. Sekarang dengan ini, saya akan membuat konstanta baru
di sini, mulai layar permainan yang merupakan komponen fungsional yang tampak seperti ini,
di mana kita akan memiliki objek gaya dengan Stylesheet. buat, seperti ini dan di mana saya kemudian ekspor layar mulai permainan seperti itu
dan Anda dapat menyimpan ini sebagai jenis template untuk setiap komponen baru yang Anda tambahkan karena 90% komponen kustom yang Anda buat dalam React
Native terlihat seperti ini pada dasarnya, Anda mengimpor React, Anda mengimpor beberapa barang dari React Native,
Anda mendefinisikan komponen Anda, namanya berbeda tentu saja, Anda memiliki objek gaya Anda dan Anda mengekspornya, itu hampir selalu
sama sehingga Anda
dapat menyimpan jenis ini sebagai templat jika Anda mau. Saya tidak ingin ke sini, jadi saya
akan terus bekerja dengan komponen itu sendiri dan pertanyaannya sekarang adalah, apa yang kita
render di layar permulaan ini? Seperti apa seharusnya itu? Pada akhirnya di sana,
saya akan memiliki tampilan pembungkus di sekitar seluruh layar saya karena saya pikir itu masuk
akal, memungkinkan kita untuk mengatur beberapa gaya umum. Saya akan kembali menambahkan properti layar di sini ke objek stylesheet ini yang dapat saya
lakukan, tidak akan berbenturan dengan yang ada di aplikasi. js, kita bisa juga memilih
nama yang berbeda, keduanya sama sekali tidak terkait karena ini adalah objek Javascript independen
yang pada akhirnya dikelola dalam file independen. Jadi kita dapat mengulangi nama di sini atau memilih nama yang berbeda, saya akan memilih nama
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
satu sehingga dibutuhkan semua ruang yang bisa didapat yang berarti bahwa karena saya akan menambahkannya di bawah tajuk,
itu akan mengambil semua ruang di bawah tajuk, baik secara vertikal maupun horizontal
dan selain itu , Saya juga ingin menambahkan beberapa padding di sini dari 10 sehingga konten tidak duduk
langsung di tepi layar ini tetapi ada beberapa jarak ke kiri, kanan, atas dan bawah dan saya
akan menambahkan item center tengah.
Perlu diingat bahwa setiap tampilan secara default menggunakan flexbox dan secara default menggunakan kolom arah fleksibel,
sejajarkan item yang diposisikan item di sepanjang sumbu silang, jadi
karena arah default adalah kolom, sumbu silang dibiarkan ke kanan, jadi
itu adalah sumbu
horizontal, jadi ini akan menyelaraskan item di tengah secara horizontal tetapi tidak secara vertikal.
Di sana kami menggunakan default mulai justifyContent flex tetapi karena saya
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
menutup tag saya di sini yang tentu saja saya tidak ingin lakukan,
jadi izinkan saya mengembalikan
ini dan sekarang kami memiliki pandangan untuk kami layar game. Sekarang untuk melihat apakah itu berfungsi,
saya hanya akan menampilkan beberapa teks di
sini, layar permainan, hanya beberapa tempat penampung boneka. Memformat ulang itu dan sekarang di aplikasi. js, mari
kita gunakan layar itu dengan mengimpor layar mulai permainan dari folder layar dan
di sana, mulai layar permainan dan
kemudian cukup tambahkan di sini, seperti ini. Jika kami menyimpan ini, kami melihat layar game di sini dan juga di Android, jadi ini
berfungsi.
Kami menggunakan komponen terpisah kedua ini yang sekarang akan kami gunakan sebagai komponen layar penuh pada dasarnya atau hampir
layar penuh,
bagian di bawah header pada akhirnya.