Pada layar kategori, kami ingin memastikan bahwa barang kami dapat disentuh di sana,
jadi saya akan mengimpor terjamah dan saya akan mengimpor opacity terjamah di sini untuk memiliki sedikit efek opacity tetapi
tentu saja terserah
Anda yang pola atau komponen mana
yang Anda gunakan di sana, harus ada komponen yang dapat disentuh yang mana Anda membungkus item Anda di sini
dan sekarang
pada opacity terjamah, saya akan menambahkan onPress sehingga kita dapat melakukan sesuatu ketika ini ditekan.
Apa yang ingin kita lakukan?
Kami ingin pergi ke layar makanan kategori yang merupakan jenis halaman detail untuk kategori yang dipilih untuk menunjukkan semua resep
untuk kategori itu, kami belum
memiliki resep tetapi saya masih ingin pergi ke halaman.
Jadi karena itu di sini, kita perlu memicu tindakan navigasi dan sebelumnya kita melakukan ini dengan navigasi alat
peraga navigasi, kan?
Masalahnya adalah, kami tidak memiliki alat peraga yang tersedia di sini karena kami berada di dalam fungsi item
kotak render yang berada di luar komponen kami.
Sekarang kita cukup memindahkan ini ke dalam komponen kita untuk memperbaiki masalah ini.
Jika kita membuat fungsi itu di sana, maka kita memiliki akses ke alat peraga karena kita sekarang berada di dalam fungsi
komponen kita dan sekarang kita akan dapat memanggil navigasi di sini. Kita dapat memanggil navigasi dan saya ingin pergi ke
nama rute dan tentu saja nama rute yang ingin saya tuju dapat ditemukan di navigator kami adalah makanan
kategori tepat, karena kami ingin memuat semua makanan untuk kategori yang dipilih.
Jadi kita pergi ke makanan kategori di sini dan jika kita menambahkan ini dan kita menyimpan ini, kita melihat sekarang
styling kita agak rusak, saya akan memperbaikinya dalam sedetik tetapi navigasi berfungsi,
kita juga memiliki efek opacity ini, jadi itu berfungsi . Sekarang memperbaiki styling itu mudah, kami hanya kehilangan itu karena saya
membungkus opacity yang dapat disentuh di sekitar pandangan
saya, kami hanya perlu menambahkan gaya ini di sini yang menambahkan margin di sekitar item kami dan seterusnya ke opacity yang
dapat disentuh alih-alih tampilan itu di sini dan dengan itu, kami mendapatkan gaya itu kembali dan ini sekarang berfungsi sebagaimana mestinya.
Pertanyaan yang lebih menarik adalah, bagaimana kita bisa mengatur judul header kita? Sekarang untuk itu, kita mendapatkan beberapa
opsi,
mari kita lihat opsi nomor satu. Pada setiap komponen Bereaksi yang akan
Anda muat sebagai layar, Artinya apa yang Anda petakan ke nama layar seperti misalnya navigator tumpukan, Anda dapat menambahkan properti.
Sekarang perlu diingat bahwa layar kategori tentu saja komponen Bereaksi tetapi secara teknis, ini adalah fungsi
Javascript, kan?
Ini adalah fungsi yang menerima argumen props dan kemudian menjalankan tubuh ini yang mengembalikan beberapa
jsx dan karenanya React dapat menggunakan ini sebagai komponen tetapi
secara teknis, ini adalah fungsi Javascript.
Sekarang fungsi Javascript hanyalah objek, itu Javascript,
fungsi adalah
objek dan pada objek, kita dapat menambahkan properti. Jadi layar kategori hanyalah objek Javascript, maka
kita
dapat menambahkan properti setelah membuatnya.
Jadi di sini, setelah mendefinisikan fungsi layar kategori kami dan oleh karena itu objek ini, kami dapat mengaksesnya dan kami dapat
menambahkan properti dengan notasi titik, itulah cara Javascript bekerja, Anda cukup menambahkan properti
seperti itu.
Sekarang Anda dapat menambahkan properti khusus di sini yang Bereaksi navigasi akan terlihat dan itulah
properti opsi navigasi.
Anda tidak harus menambahkannya dan itu tidak akan menjadi masalah jika
Anda tidak melakukannya, kami belum melakukannya sejauh ini tetapi Anda dapat menambahkannya, jika Anda menambahkannya, itu akan dihormati oleh Bereaksi navigasi.
Sekarang ada banyak opsi yang dapat Anda atur di sana dan daftar lengkapnya tentu saja dapat
ditemukan di dokumen resmi.
Dalam bentuk yang paling sederhana, Anda cukup menetapkan objek Javascript di sini
dengan sekelompok opsi yang sekarang dapat Anda atur di objek ini dan opsi yang saya tertarik di
sini adalah judul header, yang dapat dengan mudah diatur ke teks, misalnya kategori makan karena kita berada di layar kategori sehingga akan
menjadi judul yang pas. Jika kami menyimpan
ini, Anda sekarang melihat kategori makanan sebagai judul di sini di header.
Sekarang Anda juga dapat mendesain tajuk di sini dengan bantuan properti gaya tajuk, ini mengambil objek gaya
di mana Anda secara umum dapat mengatur apa yang dapat Anda atur sebagai gaya pada tampilan juga dan di
sana, Anda dapat menambahkan warna latar belakang yang merupakan gaya paling umum yang biasanya Anda terapkan.
Sekarang saya ingin mengatur warna di sini dan saya akan menggunakan pendekatan yang saya gunakan sebelumnya
dalam kursus, saya akan menambahkan folder konstanta dan di sana, saya akan menambahkan warna. File js di mana saya kemudian akan mengekspor objek Javascript di mana
semua warna yang ingin saya gunakan berulang kali dalam aplikasi diatur.
Di sana, saya akan mengatur warna primer yang saya pilih kode hex # 4a148C tapi tentu saja Anda dapat bereksperimen dengan warna yang
berbeda jika Anda mau dan saya akan mengatur warna aksen atau warna sekunder yang kode hex adalah
# ff6f00 dan ini hanya warna yang saya pilih, seperti yang saya sebutkan,
Anda dapat menggunakan yang berbeda tentu saja. Kembali pada layar kategori, sekarang saya ingin
menggunakan warna dan untuk ini, Anda perlu mengimpornya, mengimpor warna dengan huruf C, yang hanya merupakan
konvensi yang saya gunakan untuk menunjukkan bahwa ini adalah konstanta, dari konstanta / Warna , juga dinamai dengan huruf C dan
kemudian di sini kita menggunakan Warna. primaryColor misalnya. Jika Anda melakukan ini, Anda akan melihat bahwa tajuk Anda
sekarang memiliki warna ungu gelap yang saya pilih. Itu membuat judulnya sedikit sulit untuk dibaca tetapi
untungnya, Anda dapat mendesain ini juga, tidak dengan gaya tajuk karena itu hanya kotak
untuk tajuknya sehingga bisa dikatakan, bukan kontennya tetapi judulnya dapat ditata dengan warna warna tajuk dan sekali lagi, dokumen resmi adalah tempat di
mana Anda dapat mempelajari semua tentang opsi yang tersedia ini, itulah yang saya ketahui
tentang mereka, di
situlah Anda akan membaca tentang mereka.
Sekarang warna tajuk warna selalu dapat menjadi warna, misalnya putih di sini yang cocok dengan
warna default saya dan sekarang Anda melihat ini putih. Anda tentu saja mungkin juga menginginkan tampilan yang berbeda untuk Android dan
iOS, Anda mungkin ingin melihat di mana ini terlihat lebih iOS-ish yang berarti
Anda tidak memiliki latar belakang berwarna tetapi hanya teks berwarna dan Anda dapat mencapainya dengan baik API
platform lama yang Anda pelajari sebelumnya dalam kursus. Kita dapat menggunakan platform API untuk secara
dinamis mengganti warna yang kita gunakan di sini berdasarkan platform yang digunakan oleh aplikasi kita.
Jadi di sini untuk warna latar belakang, kita bisa menggunakan platform. os dan lihat apakah itu Android, dalam
hal ini saya ingin menggunakan warna primer, kalau tidak dalam ekspresi ternary ini, saya tidak akan menggunakan warna,
jadi kita bisa menggunakan putih di sini misalnya, latar belakang putih normal atau hanya mengatur tidak ada warna sama sekali seperti
ini dan Anda akan mendapatkan warna latar belakang default. Dan untuk warna warna, itu sama,
saya memeriksa apakah sistem operasi Android di mana warna
teks harus putih, kalau tidak saya akan mengatur ini ke Warna. primaryColour dan dengan itu, Anda sekarang memiliki lebih banyak iOS ini, yang
lebih khas iOS lihat di sini di iOS dan Anda memiliki tampilan Android default yang lebih berwarna pada Android.
Jadi itulah bagaimana Anda dapat mengatur opsi navigasi
di sini, sekarang bagaimana dengan layar ini, di mana kita pergi ke detail kami di sini, ke makanan
Italia atau ke makanan cepat dan mudah? Alangkah baiknya jika kita bisa melihat cepat dan mudah di sini atau Italia di sini di
header dalam kasus itu.
Jadi itu hal berikutnya yang harus kita urus dan untuk ini, kita perlu meneruskan beberapa
informasi dari layar ini ke layar ini. Jadi kita akan melihat cara kerjanya di video berikutnya.