Sekarang dengan wadah input yang ditentukan dan dengan beberapa gaya baru yang dicakup oleh itu, kita dapat
melakukan sesuatu yang saya sebutkan bahwa itu akan selalu menjadi ide yang
baik, kita dapat membagi aplikasi kita menjadi beberapa komponen.
Tampilan ini di sini,
tampilan wadah masukan ini, tampilan kartu ini mungkin adalah sesuatu yang ingin kita gunakan di bagian lain aplikasi
juga.
Kami mungkin memiliki item berbeda yang ingin kami sajikan
dalam kartu seperti itu, pertimbangkan Anda membangun toko online tempat Anda memiliki
setiap produk dalam kartu tersebut di layar ikhtisar. Sekarang untuk menghindari pengulangan definisi gaya ini berulang-ulang,
kita dapat mengalihdayakannya menjadi komponen yang terpisah, komponen yang tidak benar-benar memiliki banyak logika di
dalamnya tetapi yang
mengontrol gaya kontennya, komponen presentasi murni karenanya. Secara teknis itu masih merupakan komponen Bereaksi biasa dan karenanya saya akan membuat file
baru di sini di folder komponen dan beri nama kartu itu. Nama terserah Anda, tetapi ini adalah tampilan kartu yang
khas sehingga
terdengar seperti nama yang pas bagi saya.
Sekarang di sini seperti biasa, impor Bereaksi dari Bereaksi dan kemudian juga mengimpor pandangan dari Bereaksi Asli di sini dan kemudian membuat
komponen kartu, komponen fungsional seperti ini yang pada akhirnya Anda ekspor sebagai default dan jelas karena ini semua tentang presentasi di sini, kami Anda
akan memerlukan stylesheet
untuk membuat objek gaya karena itu akan menjadi hal inti dari komponen ini, itu
harus ada di sana untuk membungkus
dirinya sendiri di sekitar konten apa pun dan hanya menerapkan beberapa gaya umum.
Jadi sekarang, saya akan ke layar mulai permainan dan saya akan mengambil semua gaya di sini dari wadah
input, menyalinnya dari sana dan menambahkannya ke kartu sebagai gantinya. Di sini saya akan menambahkan properti kartu baru
dan
menggunakan gaya saya di sini dan di dalam komponen kartu,
saya akan memiliki markup yang sangat sederhana sehingga, kode jsx sangat sederhana.
Itu hanya pandangan yang saya kembalikan di sini yang harus dibungkus alat peraga anak-anak, alat peraga anak-anak
adalah alat peraga khusus dalam Bereaksi yang pada dasarnya adalah konten yang Anda berikan di antara
tag pembuka dan penutup dari komponen khusus Anda. Jadi itu dapat membungkus dirinya sendiri di sekitar konten apa pun
karena satu-satunya tujuan komponen kartu ini adalah menerapkan beberapa gaya pada wadah di sekitarnya dan kami melakukan ini dengan menambahkan kartu gaya di sini.
Sekarang hanya ada satu hal, ada gaya tertentu di sini yang mungkin tidak boleh diatur dari
dalam kartu,
tidak setiap kartu mungkin memiliki lebar ini atau lebar maks dan tidak setiap kartu harus memusatkan isinya.
Oleh karena itu saya akan memotong tiga item ini dari sana dan hanya memiliki bayangan dan bantalan yang
dipasang di sini dan saya ingin membuat ini sedikit lebih fleksibel.
Selain gaya kartu, alangkah baiknya jika kita juga bisa menetapkan gaya kita sendiri
dari luar dan bahkan mungkin menimpa beberapa gaya kartu. Kita dapat melakukan ini dengan mengirimkan objek baru ke prop gaya dan
mendistribusikan semua properti, semua pasangan nilai kunci dari gaya kartu kita di sini ke objek baru ini.
Ini adalah operator penyebaran, fitur Javascript modern yang menarik semua pasangan nilai kunci dari suatu objek
dan menambahkannya ke objek sekitarnya yang baru.
Jadi kami menyalin semua gaya yang ditentukan di sana ke objek baru ini
dan saya melakukan ini sehingga saya juga bisa menambahkan pasangan nilai kunci lain di sini atau pasangan pasangan nilai kunci
di mana saya mengambil semua gaya yang ditentukan dalam gaya alat peraga, jadi pada prop gaya yang saya berikan ke komponen kustom saya sendiri,
saya
mengambil semua pasangan nilai kunci yang didefinisikan di sana dan menggabungkan mereka ke dalam objek ini dan karena saya melakukan
ini kedua, ini akan menimpa pasangan nilai kunci yang diatur dalam kartu gaya, sehingga kita dapat mengesampingkan gaya
apa pun yang diatur di sana dari luar ketika
kita menggunakan komponen kita dan ketika kita menambahkan gaya tambahan di luar komponen, itu juga akan menggabungkan
itu dan mempertimbangkannya dan dengan itu kita juga dapat menetapkan gaya kita sendiri dari luar dari komponen kartu ketika kita
menggunakan komponen kartu dan menggunakan komponen kartu adalah sesuatu yang masuk akal sebagai langkah selanjutnya.
Jadi mari kita pergi ke layar mulai permainan ini dan impor kartu dari folder komponen dan di
sana dari folder kartu dan ganti tampilan wadah masukan kami di sini dengan kartu, seperti ini, seperti ini, dengan membuka
dan menutup tag.
Sekarang lagi, saya ingin mengatur gaya saya sendiri, saya ingin mengatur lebar saya sendiri, lebar maks
dan menyelaraskan item, jadi saya akan menyimpan wadah input
di stylesheet di sana, tetapi sekarang singkirkan semua gaya lain di sana, semua gaya yang sekarang diatur dalam kartu
sehingga
kita hanya menjaga lebar dan penyelarasan di sini dan kemudian menambahkan ini di sini ke kartu pada alat peraga gaya yang diterima atau
yang memiliki efek karena dalam komponen kartu, itu alat peraga gaya yang Saya bergabung dengan style saya yang
lain, jadi untuk prop gaya itu, saya akan menunjuk ke wadah input style. Sekarang dengan itu jika kita menyimpan itu,
saya mendapatkan kesalahan,
objek bukan fungsi di dekat React Native stylesheet.
Begitu juga dalam kartu. File js saat menunjuk di sini, ada yang salah, bahkan memberi saya
nomor baris, itu baris 10, itulah yang dimaksud angka ini dan ya, masalah saya di sini adalah saya menggunakan stylesheet seperti ini,
itu salah,
alih-alih kita harus memanggil Stylesheet . buat untuk menentukan gaya kita sendiri, jadi
itu sintaks yang tepat.
Jadi ini adalah kesalahan sintaksis, bukan kesalahan sintaksis secara teknis tapi saya menggunakan objek stylesheet salah.
Jadi itu adalah kesalahan dari pihak saya, pesan kesalahan membantu kami dengan itu dan sekarang kami
memiliki tampilan yang sama seperti sebelumnya, tetapi kami memiliki kartu yang dapat digunakan kembali yang sekarang dapat kita gunakan di tempat di mana kita
ingin memiliki tampilan persis seperti ini dengan bayangan dan begitu seterusnya.