Jadi di layar daftar tempat, saya ingin menampilkan daftar tempat yang tidak mengejutkan dan untuk itu Anda tahu
satu komponen dari Bereaksi Asli yang dapat
kami impor dan itulah daftar datar. Daftar datar tentu saja sempurna
untuk menghasilkan daftar.
Jadi di sini saya akan mengembalikan daftar datar
sekarang dan saya ingin mendapatkan akses ke tempat saya.
Ini disimpan di Redux sehingga
kami dapat atau dengan bantuan Redux, sehingga kami dapat mengimpor Bereaksi Redux di sini atau tepatnya, dari paket itu, kami
mengimpor pemilih penggunaan karena sekarang dalam komponen kami, kami dapat menggunakannya untuk mendapatkan akses ke data disimpan di Redux.
Jadi di sini, saya ingin mendapatkan akses ke tempat saya dengan
bantuan pemilih penggunaan, itu mudah, kami melewati fungsi yang menerima toko Redux kami, keadaan Redux
kami yang disimpan di toko di sana dan di sana saya ingin mendapatkan akses ke tempat mengiris dan
di sini saya menggunakan tempat karena di app. js, saya menggunakan tempat sebagai pengidentifikasi di sini, yang membawa kami ke irisan yang dikelola
dengan peredam tempat dan dalam peredam itu, kami memiliki kunci tempat lain,
jadi pada akhirnya di sini saya ingin mengakses status. tempat tempat dan dengan itu, kita tahu jenis
data apa yang ingin kita masukkan ke daftar datar.
Sekarang lagi, saya juga akan menambahkan extractor kunci di sini untuk memberi tahu daftar datar di mana menemukan ID unik untuk
setiap item dan bagi saya itu ada di properti ID setiap
tempat dan tentu saja kita perlu menambahkan render item, sehingga kita mendapatkan data barang data kami dan kemudian menampilkan
komponen untuk setiap item yang ingin kami hasilkan.
Sekarang untuk itu, saya akan benar-benar membuat komponen baru di folder
komponen dan itulah PlaceItem. file js. Sekarang untuk menghemat waktu, saya lampirkan PlaceItem saya. File js ke kuliah ini dan Anda bisa mengganti
milik Anda atau konten Anda dengan milik saya tapi tentu saja saya akan memandu Anda melalui apa yang saya lakukan
di sana.
Ini adalah komponen dasar karena kami juga membangunnya beberapa kali selama kursus ini, saya hanya memiliki
komponen sendiri di sini yang dapat menampilkan gambar karena kami akan membutuhkannya nanti, yang kemudian memiliki tampilan
dengan dua bagian teks yang akan duduk di sebelah gambar
ini, berkat gaya yang saya terapkan di sana. Di sana, saya menampilkan judul dan alamat tempat itu,
tentu saja itu informasi yang belum kami miliki tetapi kami akan menambahkan ini di seluruh modul ini dan kami
memiliki komponen opacity yang dapat disentuh di sekitar ini sehingga kami dapat menekan setiap tempat dan kapan kami
menekannya, kami memicu fungsi yang kami harapkan untuk mendapatkan pada prop pilih.
Sekarang dalam gaya saya di sini, saya mengatur ini sehingga gambar dan blok teks ini duduk
bersebelahan di satu baris di sini dengan baris arah fleksibel, gambar tersebut kemudian gambar bulat, jadi itu adalah
gambar bulat, itu adalah lingkaran dengan warna latar belakang penuh jika kita belum memiliki gambar yang tentu saja Anda
juga dapat berubah menjadi misalnya warna keabu-abuan ini. Kemudian kita memiliki wadah info yang merupakan wadah
menampung dua potongan teks yang sekarang disusun dalam kolom di atas satu sama lain
dan kemudian kita memiliki judul yang sedikit lebih besar dari alamat dan di sana,
saya sebenarnya juga ingin menggunakan hitam sebagai warna teks. Itulah pengaturan yang akan saya gunakan di sini
dan itu adalah item tempat yang sekarang
dapat kita impor ke layar daftar tempat, jadi di sana kita dapat mengimpor item tempat dari komponen item tempat dan menampilkannya di sini dalam item render.
Jadi di sana saya ingin menampilkan item tempat sebagai komponen penutup sendiri dan sekarang item tempat, komponen
baru ini memerlukan beberapa data input. Kita harus memasukkan prop terpilih yang menunjuk
pada fungsi yang harus dijalankan ketika kita mengetuk ikon. Kita harus memasukkan prop gambar, prop judul dan prop alamat, sehingga
empat prop yang perlu disediakan. Jadi mari kita lakukan di sini. Untuk gambar, kami belum mendapatkan gambar, jadi
di sini saya hanya akan memberikan nol untuk saat ini. Untuk judul, kita bisa melakukannya tentu saja,
kita bisa menunjuk pada itemData. barang. judul karena satu item hanyalah item yang mengikuti
model tempat kami dan tentu saja memiliki judul prop, sehingga kami dapat mengaksesnya dengan aman. Untuk alamatnya, kami belum memilikinya, jadi saya akan mengatur
ini menjadi
nol dan untuk
dipilih, tentu saja kita dapat
mengatur ini, di sana
saya ingin pergi ke halaman baru. Jadi kita dapat melakukan ini dengan fungsi inline anonim di sini atau dengan
fungsi bernama disimpan dalam konstanta terpisah, apa pun
yang Anda inginkan, saya
akan melakukannya inline dan di sana saya dapat menggunakan alat peraga. navigasi. navigasi dan pergi ke layar detail tempat
dengan pengenal detail tempat yang tentu saja di navigator saya adalah pengidentifikasi ini di sana-sini saya
juga
ingin memberikan beberapa data tambahan, beberapa param, jadi saya akan memberikan argumen kedua di sini untuk menavigasi dan ada dua informasi
yang ingin saya sampaikan, itulah judul tempat
dan tentu saja itemData. barang. judul, jadi hal yang
sama persis saya makan ke prop judul di sini dan itu juga
ID tempat yang merupakan itemData. barang. id dan kami sudah
memiliki ID itu juga, jadi itu sudah
sesuatu yang kami hasilkan ketika kami menambahkan tempat baru. Dengan itu, kita memiliki item tempat yang membawa
kita ke layar detail tempat dan karena kita sudah memiliki kerangka dasar di layar
itu, kita harus dapat melihatnya.
Satu hal yang saya akan tambahkan ke layar detail tempat adalah konfigurasi opsi navigasi saya di
mana saya memerlukan fungsi dinamis yang kemudian mengembalikan objek konfigurasi karena di sana saya ingin mengatur judul header
berdasarkan params yang saya dapatkan karena dalam daftar tempat layar, saya meneruskan judul tempat dan
parameter ID tempat ke layar baru ini. Judul tempat adalah apa yang ingin saya ekstrak dan atur di sini
di tajuk,
sehingga di sana saya dapat mengatur judul tajuk ke navData. navigasi. judul tempat getParam sehingga
kami memiliki judul ini di header. Dan sekarang dengan itu, mari kita coba,
mari kita simpan semuanya dan tambahkan tempat baru, ujian. Klik simpan tempat, kami kembali dan kami melihatnya di sini jika saya mengetuknya,
kami pergi ke layar detail tempat kami melihatnya di tajuk. Mari kita coba juga di Android
dengan tes, simpan ini, klik dan semuanya berfungsi. Jadi itulah aliran dasar untuk ini tetapi satu hal
yang masih belum kita lakukan tentu saja adalah menggunakan beberapa fungsi asli.
Jadi sekarang saatnya kita melakukan itu dan saya ingin memulai dengan kamera.