Sekarang kita mendapatkan dasar-dasar ini dari jalan dan sebelum kita menyelam lebih dalam ke React Native dan juga
bagaimana kita dapat mendesain aplikasi kita dalam sedikit cara yang lebih indah karena jelas gaya kita
di sini pasti masih memiliki potensi sisi atas untuk meletakkannya seperti ini,
sebelum kita menyelam semua itu, izinkan saya menunjukkan kepada Anda komponen menarik lain yang dibangun ke
dalam React Native dan itu juga menunjukkan betapa mudahnya Anda dapat menambahkan fitur keren ke aplikasi React Native
dan itu adalah komponen modal.
Anda menemukannya tentu saja di dokumen resmi di komponen itu dan panduan API
di sana-sini, Anda akan menemukan modal di sana.
Sekarang di bawah yang lain dan di sini, modal ini adalah komponen yang bagus yang memungkinkan Anda
untuk menambahkan overlay yang bagus, overlay layar penuh dengan sedikit usaha.
Sekarang mari kita tambahkan modal untuk benar-benar meng-hosting input tujuan kita, saat ini input
tujuan ada di sini di bagian atas dan itu tidak
apa-apa tetapi saya benar-benar ingin memindahkannya ke dalam modal sehingga kita memilikinya pada overlay layar penuh pada akhirnya dan
kami hanya memiliki tombol di sini
di bagian atas, jadi sebagai pengganti input tujuan yang membuka modal itu.
Jadi mari kita pergi ke input tujuan
dan
di sana, saya ingin membungkus ini menjadi modal. Jadi saya akan mengimpor modal dari
React Native karena itu pengiriman komponen dengan
React Native dan di sana, saya ingin menggunakan modal itu di sekitar pandangan saya di sini, jadi
seperti ini untuk sekarang dan sekarang mari kita simpan itu dan
mari kita lihat apakah itu sudah mengubah sesuatu
sedikit ya, gaya
kami padam, kami kehilangan lapisan yang kami setel awalnya, kan?
Dalam aplikasi. js, kami memiliki bantalan umum pada tampilan layar
kami yaitu tampilan luar itu, itu tentu tidak diterapkan pada dua platform lagi, pada dua perangkat karena
konten kami jauh di luar layar ini, sehingga modal sudah melakukan sesuatu dan tentu saja
kita tidak benar-benar melihat sebanyak itu. Sekarang untuk modal, jadi untuk komponen
modal ini, Anda dapat mengatur kunci yang terlihat yang menentukan apakah ini saat ini terlihat
atau tidak dan yang mengambil boolean jika kami menetapkan ini sebagai false misalnya dan setelah itu jika
kami melihat aplikasi
kami, kami tentu saja terlihat layar kosong. Ngomong-ngomong, kalau-kalau Android tidak boleh memperbarui untuk
Anda setelah mengatur ini ke false, cukup tutup aplikasi di sini dengan bantuan laci aplikasi dan setelah itu dalam proses Anda
di sana, proses mulai npm, tekan lagi untuk memulai kembali ini di Android.
Jadi sekarang kita memiliki layar kosong ketika ini
disetel ke false, sekarang kita jelas hardcoding ini bukan solusinya.
Sebaliknya dalam aplikasi. js, saya sekarang ingin memiliki tombol yang memungkinkan kita untuk membuka modal itu
dan kemudian kita akan menutup modal
dari dalam modal ketika kita menekan tombol add di sana. Sekarang kita sudah mengimpor tombol di sini ke aplikasi. js dan sekarang saya melihat
ini, tentu saja kita juga bisa menyingkirkan impor yang tidak kita gunakan di
sini sekarang,
jadi tinggalkan saja tombol impor di sini bersama dengan impor lain yang kita
gunakan dan sekarang di sini di bagian paling atas , kita dapat menambahkan tombol, itu adalah
tag penutup sendiri dan mengatur judul untuk menambahkan tujuan baru mungkin, sesuatu seperti itu. Jika kita melakukan itu, kita tentu harus melihat tombol itu di sini di atas dan
di
sini dan sekarang ketika
kita menekan tombol itu, kita ingin menunjukkan modal itu, kan? Sekarang untuk itu, kita perlu mengelola lebih banyak
negara.
Jadi di sini selain mengelola tujuan kursus, saya sekarang juga akan mengelola apakah kita saat ini
sedang dalam mode penambahan atau jika tidak.
Jadi awalnya, kita tidak begitu keadaan awal yang saya tetapkan adalah salah dan saya akan memberi nama
keadaan saya di sini
dan tentu saja itu sepenuhnya terserah Anda, saya akan menamakannya AddMode dan setIsAddMode.
Sekali lagi nama-nama
ini terserah Anda, saya hanya memiliki konvensi di sini yang juga Anda temukan di dokumen Bereaksi resmi di mana di sini kami
mencoba untuk memberikan keadaan kami mengendalikan nama yang pas dan kemudian kami pada dasarnya mengambil nama itu
dan menambahkan set di depannya untuk memperjelas bahwa ini adalah fungsi untuk mengubah keadaan itu.
Jadi setIsAddMode adalah apa yang pada akhirnya perlu kita panggil ketika tombol ini ditekan dan di
sini kita dapat menggunakan fungsi inline atau menggunakan fungsi bernama dan hanya menambahkan handler di sini, apa pun yang
Anda inginkan.
Saya akan pergi dengan fungsi inline dan memanggil set isAddMode dan mengatur ini ke
true di sini ketika tombol ini dipanggil sehingga kita membuka modal. Sekarang kita dapat mengambil status AddMode yang sedang kita ubah
dan mengirimkannya ke input tujuan untuk kemudian mengubah visibilitas modal di sana. Jadi di sini, kita dapat menambahkan prop yang terlihat
tetapi nama prop itu terserah Anda karena itu pada komponen kita sendiri dan saya meneruskan isAddMode,
jadi itulah keadaan
yang kita kendalikan, ke mode terlihat, sehingga
nilai yang disimpan dalam isAdMMode dilewatkan sebagai nilai untuk prop yang terlihat.
Sekarang dalam input tujuan, oleh karena itu kita sekarang dapat menggunakan prop
yang terlihat, jadi di sini kita dapat menggunakan props
yang terlihat, sekarang mengacu pada prop yang terlihat yang kita dapatkan pada input sasaran yang kemudian kita
teruskan ke prop yang terlihat dari modal. Jika sekarang kita menyimpan itu dan kita melihat
aplikasi kita, jika saya tekan tambahkan tujuan baru di sini, memang Anda melihat konten modal di sini lagi.
Sekarang jelas, ini tidak terlihat cantik di
sini, jadi kita
harus mengubahnya dan satu hal lagi yang ingin saya ubah adalah animasi di sini bagus untuk membuka modalnya, kan?
Jadi di sini mari kita tambahkan jenis animasi yang merupakan properti bagus yang dapat kita atur di sini dan Anda dapat mengatur ini ke string dan di
sana Anda mendapat tiga opsi - tidak ada yang merupakan default tetapi Anda dapat mengatur ini untuk
meluncur dan sekarang modal seharusnya benar-benar muncul dengan menggeser naik.
Jadi jika Anda menekan add goal baru, sekarang slide
ini, juga di Android.
Jadi itulah pengalaman pengguna yang lebih baik, saya katakan, langkah berikutnya adalah kami memastikan bahwa konten kami
di modal disajikan dengan cara yang lebih baik, mungkin dipusatkan di sini di tengah modal.