Jadi mari kita mulai bekerja pada aplikasi ini lalu dan untuk
ini, saya memiliki aplikasi baru di sini,
Anda akan menemukannya terlampir jika Anda ingin membangun pada aplikasi awal yang sama ini.
Aplikasi sederhana ini memberi kita ini di sini, aplikasi yang sangat jelek di mana kita memiliki beberapa teks yang tumpang
tindih oleh bilah status, oleh takik.
Sekarang kita bisa memperbaikinya dengan tampilan area simpan seperti yang Anda pelajari sebelumnya tetapi kami tidak perlu melakukannya
karena kami tidak akan menyimpan konten ini lagi dan kami akan menggunakan perpustakaan pihak ketiga yang memungkinkan kami untuk dengan mudah
menavigasi antara layar yang berbeda dan mendapatkan animasi yang bagus di
sepanjang jalan, sehingga kita tidak
perlu berhati-hati tentang hal itu dan perpustakaan pihak ketiga ini juga akan mengelola takik pada perangkat dan memberi kita area penyimpanan
di luar kotak.
Sekarang sebelum kita menambahkan perpustakaan pihak ketiga, mari kita mulai menulis beberapa kode karena kita hanya
dapat menavigasi antar layar jika kita memiliki banyak layar.
Jadi untuk itu, saya akan membuat folder layar baru di sini dan saya juga
sudah membuat folder komponen, perbedaannya adalah di folder layar, kita memiliki komponen Bereaksi
ini yang kemudian kita gunakan sebagai layar penuh yang saya kira dan di folder komponen sebagai gantinya, kita
akan memiliki
komponen yang kita gunakan di layar kita, jadi misalnya ketika kita memiliki kategori kisi makanan, kategori
makanan, maka item kisi kita akan menjadi komponen, seluruh kisi, seluruh kategori makanan Namun layar akan
menjadi layar dan saya kira ini masuk akal. Sekarang sebagai sketsa, sebagaimana ditata, dalam aplikasi ini kita akan memerlukan beberapa layar dan saya akan membuat
semua file dan kita akan mengisinya dengan kehidupan di seluruh modul ini tentu saja. Kita akan membutuhkan layar kategori dan saya akan
memberi nama layar kategori file untuk membuatnya benar-benar jelas apa yang ada di
dalamnya.
Ini adalah layar tempat kita dapat memilih kategori seperti Italia, Jerman, Amerika, jadi di mana kita dapat memilih kategori
makanan, jadi kita akan menambahkan konten yang mencerminkan ini, kita akan menambahkan kotak seperti itu di layar ini,
di layar ini komponen nanti.
Sekarang setelah kami memilih kategori, kita akan melihat daftar makanan yang sesuai dengan kategori ini dan saya akan memberi nama layar
ini yang kemudian akan kita lihat, yang akan kita navigasikan ke, layar makanan kategori karena ini adalah
layar yang memuat makanan untuk kategori yang dipilih.
Jadi itu adalah layar lain yang kita butuhkan dan layar lain yang dapat kita gunakan untuk navigasi.
Sekarang kita juga akan membutuhkan layar favorit yang merupakan layar yang menampung semua resep favorit kita, makanan favorit
kita dan kita juga akan membutuhkan MealDetailScreen, itulah layar yang kita lihat jika kita mengetuk satu kali makan di dalam
kategori yang dipilih atau di layar favorit. Ini kemudian menunjukkan kepada kita bahan-bahan dan
langkah-langkah rinci untuk makanan ini.
Sekarang dan terakhir tetapi tidak kalah pentingnya, kita akan membutuhkan layar filter dan layar filter ini adalah layar yang
memungkinkan kita untuk mengatur filter, seperti makanan vegan sehingga kita hanya melihat resep yang vegan atau vegetarian atau glutenFree atau lactoseFree, ini
akan menjadi empat kategori yang akan
saya miliki di aplikasi ini, jadi ini adalah layar. Sekarang kita akan menambahkan komponen seperti yang kita
butuhkan dan tidak menambahkan semua file di
muka dan dengan itu, kita memiliki pengaturan dasar yang kita butuhkan di sini, meskipun tentu saja
semua layar kita benar-benar kosong. Sekarang kita akan mengisinya dengan lebih banyak langkah demi langkah,
tetapi setidaknya saya ingin membuat komponen dasar di setiap layar ini.
Jadi saya akan mulai di layar kategori dan tentu saja, kita perlu mengimpor Bereaksi dari Bereaksi di sana
karena kita akan membangun komponen Bereaksi dan kita juga akan mengimpor sesuatu dari Bereaksi Asli karena jelas, kita akan membangun komponen Bereaksi
di sini yang menggunakan beberapa komponen Bereaksi Asli. Lebih tepatnya, saya akan mulai sederhana di sini
dan mengimpor tampilan dan teks dari Bereaksi Asli dan kemudian membuat komponen saya, layar kategori dalam hal
ini yang mengambil alat peraga atau yang mungkin menerima alat peraga setidaknya karena itu komponen Bereaksi normal setelah semua dan
di mana saya akan mengekspor ini sebagai komponen default saya. Saya juga akan menambahkan stylesheet karena kemungkinan
kita akan membutuhkan ini dan jika tidak, kita masih bisa menghapusnya nanti.
Jadi saya akan mengatur gaya
saya di sini dengan stylesheet buat, seperti ini.
Jadi itu komponen Bereaksi yang sangat dasar, tidak membuat apa
pun, jadi di dalam fungsi komponen di sini, kita harus mengembalikan sesuatu dan bahwa ada beberapa
kode jsx di mana saya ingin membuat tampilan dan di sana, teks dan di sini saya katakan layar kategori.
Sekarang saya juga akan memberikan tampilan gaya di mana saya mengatakan gaya. layar, dengan tata letak layar yang sangat mendasar atau gaya layar di sini
di mana saya mengatur flex ke satu dan kemudian membenarkan konten untuk memusatkan dan menyelaraskan item ke pusat dan ketika
Anda belajar, ini akan melakukan satu hal,
itu akan memusatkan konten di layar, jadi ini akan menempatkan teks ini di tengah layar pada akhirnya.
Ini adalah komponen dasar dan saya akan menyalin konten itu ke semua layar lain dan
tentu saja, ini bukan konten akhir yang akan kita miliki di sana, hanya beberapa konten tiruan
sehingga kita dapat mulai menavigasi antara beberapa layar ini dan melihat sesuatu .
Jadi di sini, kita memiliki layar makanan kategori, itu komponen ini di sini dan oleh karena itu apa yang kita
perlu ekspor di sini dan di sini, karena itu saya akan mengatakan layar makanan kategori seperti ini. Sekarang saya juga akan menambahkan ini ke layar favorit dan mengganti nama ini
ke layar favorit dan tentu saja karena itu
ekspor layar favorit di
sini
dan kemudian di sini, saya dapat mengatakan layar
favorit, salin ke layar filter dan lakukan hal yang
sama di sana, itu layar filter,
saya menamainya dan saya mengekspor ini dan juga mengatakan layar filter di sini dalam
teks kita dan yang terakhir, ini adalah MealDetailScreen.
Jadi di sini kita memiliki
MealDetailScreen, saya juga akan menamainya MealDetailScreen di sini dan mengekspor MealDetailScreen.
Jadi dengan itu, kami menyiapkan semuanya di layar ini, sekarang kami hampir
selesai dengan semua persiapan, saya hanya ingin menambahkan
beberapa font khusus untuk aplikasi ini dan setelah itu, kami akan langsung menambahkan beberapa navigasi.