Mari kita pastikan kita dapat pergi ke layar detail produk, layar ini
di sini dan untuk yang pertama-tama dalam komponen layar
detail produk, nah saya akan menyiapkan komponen dengan mengimpor
React from React. Kemudian di
sana, kita mungkin juga memerlukan beberapa hal dari React Native, misalnya tidak ada
salahnya untuk memiliki tampilan dan teks di sini dan juga stylesheet dan juga
komponen gambar, dengan cara urutan impor ini di sini tentu saja tidak masalah.
Saya juga ingin memiliki tombol di sana karena saya ingin memiliki tombol tambahkan ke keranjang
di sini juga dan sebenarnya juga tampilan gulir karena halaman detail ini dapat memiliki deskripsi produk yang sangat panjang atau dapat dilihat pada perangkat
yang sangat kecil dan oleh karena itu, pastinya harus dapat digulir sehingga kita selalu
dapat melihat semua konten. Dengan itu di
sini, saya akan menambahkan komponen layar detail produk saya, lagi komponen fungsional di mana kami menerima alat peraga, saya
akan mengatur stylesheet saya di sini dengan stylesheet. buat dan simpan dalam konstanta gaya dan
tentu saja ekspor layar detail produk sebagai default. Dengan itu, mari kita mulai sederhana dan mengembalikan tampilan di
sini dengan teks di mana kita mengatakan layar detail produk yang hanya ada sehingga kita dapat melihat bahwa kita berhasil menavigasi di sana dan agar
kita benar-benar dapat menggunakan ini karena kita harus mengembalikan
jsx ke memiliki komponen yang valid karena hal pertama yang ingin saya lakukan adalah
menyesuaikan navigasi dan untuk itu di ShopNavigator. File js di folder navigasi, kita
dapat mengimpor layar detail produk
di sini dari folder layar kita, folder toko dan di sana layar detail produk, jadi itu file yang
baru
saja kita kerjakan dan memetakannya ke pengenal di sini, aku akan beri nama detail produk
di sini.
Tombol-tombol ini seperti yang Anda pelajari di bagian navigasi selalu terserah
Anda, jadi sekarang kami memetakan layar ini.
Ini akan menjadi layar awal kami karena ini adalah
pasangan nilai kunci pertama, ini adalah layar yang dapat kami tuju, kami dapat menavigasi
ke dan untuk pergi ke sana, kami harus pergi ke layar ikhtisar produk kami dan ketika kami mengklik tampilan detail,
ini pada akhirnya sinyal bahwa kita ingin pergi ke layar detail produk itu.
Jadi di sini di fungsi ini, kita bisa memanggil navigasi alat peraga navigasi, fungsi navigasi ini yang Anda pelajari
di bagian navigasi dan kemudian di sana,
saya menunjukkan satu sintaks di mana Anda melewati objek Javascript di mana
Anda mengatur nama rute, yang bisa detail produk dan itu akan membawa Anda ke layar.
Jadi sekarang kita simpan ini
dan kita klik pada detail tampilan, memang kita pergi ke layar detail produk. Sekarang sebagai anotasi di bagian navigasi, saya juga menunjukkan kepada Anda
tentu
saja bahwa sintaks alternatifnya adalah bahwa Anda hanya memasukkan nama layar sebagai argumen pertama untuk menavigasi, sehingga
Anda dapat melakukannya juga
dan itu hanya akan berfungsi sebagai baik. Jika kami juga menguji ini di Android,
ini adalah bagaimana kami bisa pergi ke sana.
Sekarang jelas, tujuannya bukan hanya untuk pergi ke sana, tetapi juga untuk meneruskan data kami atau ID produk kami setidaknya sehingga
kami dapat memuat data produk di dalam komponen. Maka sebagai argumen kedua di sini, saya mengirimkan objek Javascript
yang akan menjadi params saya untuk tindakan navigasi ini dan di sana Anda dapat memiliki pasangan
nilai kunci yang Anda inginkan, saya akan menambahkan bidang ID produk di sini, sekali lagi nama ini benar-benar terserah Anda
dan ini akan menjadi itemData. barang. id karena itemData. item menunjuk pada
satu produk yang memiliki tampilan yang kami atur di sini dalam model dan ini memiliki ID prop,
jadi tentu saja kami dapat mengaksesnya di sini dan meneruskannya. Dengan itu, di layar detail produk, kita dapat mengekstrak
ini tentu saja, itu juga sesuatu yang Anda pelajari sebelumnya dan yang dapat Anda praktikkan di sini.
Kami bisa mendapatkan ID produk kami di sini hanya dengan memanggil alat peraga navigasi dapatkan ID produk param dan ini
akan mengekstrak ID produk kami dari parameter yang kami terima.
Sekarang kita dapat menggunakan ID itu untuk mendapatkan produk kita dan tentu saja produk kita disimpan di Redux.
Jadi pada akhirnya kita perlu mengimpor pemilih penggunaan di sini dari React Redux, sehingga kita dapat menggunakannya untuk memilih
satu produk, katakanlah
produk yang dipilih, nama tetap ini tentu juga terserah Anda, sekarang dipilih dengan bantuan pemilih penggunaan yang menerima
status kami, kondisi Redux kami dan kemudian kami dapat mengebor ke dalam slice produk, lagi-lagi nama
slice adalah apa yang Anda gunakan di sini dalam produk reduksi gabungan dalam kasus saya dan di sana kami bisa mendapatkan akses ke semua
produk yang tersedia tetapi dari Tentu saja di
sini saya tidak ingin memuat semua produk yang tersedia tetapi sebaliknya, saya
dapat menggunakan metode menemukan untuk menemukan satu produk dengan fungsi yang saya lewati untuk menemukan yang berjalan pada setiap item dalam
array di mana kita mendapatkan produk di mana fungsi ini mengembalikan true dan itu harus mengembalikan true
jika ID produk yang saya lihat sama dengan ID produk yang saya ekstrak dari parameter rute.
Ini adalah bagaimana kami memilih satu produk dan satu produk ini kemudian dapat digunakan di sini,
jadi di sini kami dapat menampilkan Produk yang dipilih. judul misalnya. Jika sekarang kita simpan itu dan kita melihat detailnya, memang
di sini
aku melihat baju merah, jika aku melakukannya untuk karpet biru, aku melihat karpet
biru di sini, jadi itu berhasil. Akan menyenangkan untuk melihat
bahwa di
header juga dan ada dua opsi, sekarang kita bisa menggunakan alat peraga. navigasi mengatur param di sini dan juga membungkus ini dalam panggilan efek penggunaan tentu saja,
yang akan lebih baik
untuk mengatur judul kami dengan mengatur param dan menggunakannya di sini di opsi navigasi yang harus kita tambahkan ke detail
produk untuk mengekstraknya atau sebenarnya sedikit lebih mudah, kita pergi ke ikhtisar produk yang merupakan tempat kita
pergi ke halaman itu dan selain melewati ID produk, kami juga melewati judul produk
karena di sini kami memiliki yang mudah tersedia dan kami mendapatkannya dengan
bantuan itemData. barang. judul.
Sekarang kita atur param ini juga dan ini membuatnya sangat mudah untuk
mengekstraknya di layar detail produk, di sana dalam opsi navigasi, kita sekarang bisa
menambahkan opsi navigasi layar detail produk dan ini sekarang bentuk fungsional karena kita perlu mengekstrak
ini secara dinamis dari params rute kami. Jadi di sini kita mendapatkan objek data nav ini
yang juga memiliki prop navigasi, kita perlu mengembalikan objek Javascript kita, konfigurasi config objek navigasi kita di sini, ini harus menjadi
pilihan saja dan di sana, kita dapat mengatur judul header ke navData. navigasi. judul produk getParam atau apa pun yang Anda
pilih sebagai pengidentifikasi untuk ini.
Jadi di sini saya menggunakan judul produk karena di layar tinjauan produk, saya mengatur ini ke judul produk.
Dengan itu, kita sedang mengatur tajuk ini, mari kita lihat apakah itu berfungsi, jika kita mencoba masuk ke
layar itu, itu
terlihat bagus, sekarang kita juga melihat judul produk di tajuk ini. Itu berhasil.
Sekarang saya sebutkan sebelumnya bahwa kita seharusnya tidak hanya bisa pergi ke sana dengan menekan
detail tampilan tetapi mungkin juga dengan menekan
produk secara umum dan untuk itu, kita bisa pergi ke item produk dan tentu saja, kita memiliki tombol
detail tampilan tetapi sekarang kita dapat membungkus seluruh item tentu
saja dengan cara yang dapat disentuh dan di sana kita dapat menggunakan opacity yang dapat disentuh dan membungkus seluruh item ini dengan opacity yang dapat disentuh, jadi bungkus ini
di seluruh tampilan kita di sini, tombol-tombol ini masih akan
dipicu standalone tetapi sekarang kita juga dapat menekan di tempat lain dan di sanaTekan,
saya
sekarang juga ingin memicu yang sama, tombol lihat rincian tidak, saya ingin memicu fungsi yang kami terima pada
detail tampilan, jadi saya hanya akan meneruskan ini ke detail tampilan. Dan dengan perubahan sederhana itu, kita dapat menekan di
mana saja pada item ini untuk dibawa ke layar detail, juga pada Android di mana ini namun terlihat
agak jelek dan secara umum, akan menyenangkan untuk memiliki efek riak ini di sana.
Sekarang Anda juga belajar bagaimana Anda dapat
mengimplementasikan ini, kami perlu mengimpor umpan balik asli yang dapat disentuh untuk itu dan platform API, jadi platform ini
objek dan sekarang di sini dalam item produk, kami dapat mengatur komponen terjamah kami di sini atau apa pun yang
Anda ingin menamainya , harus memiliki karakter huruf besar sehingga kita dapat menggunakannya sebagai
elemen jsx dan ini
dengan poin default pada opacity terjamah katakanlah tetapi jika platform OS sama dengan Android dan versi platform lebih besar atau sama dengan 21
yang merupakan versi Android kita perlu mendukung
efek riak, kita dapat mengatur cmp terjamah sama dengan umpan balik asli terjamah dan sekarang kita dapat mengganti opacity terjamah di sana
dengan
cmp terjamah sehingga dengan variabel yang menampung dua jenis
komponen tergantung pada di mana itu berjalan dan sekarang jika kita lakukan ini, kami
masih memiliki efek opacity di sini tetapi kami memiliki efek riak di Android.
Namun hanya di sana, tidak pada gambar dan juga tidak menghormati sudut bulat kami seperti yang mungkin Anda
lihat.
Sekarang untuk memperbaiki masalah yang
tidak ada pada gambar, yang harus kita lakukan adalah kita
harus mengubah beberapa konfigurasi di sana, kita hanya perlu menambahkan penggunaan foreground prop di sini.
Sekarang pada opacity yang dapat disentuh, ini tidak akan berpengaruh kecuali pada umpan balik asli yang dapat
disentuh, ini memastikan bahwa efek riak tidak berlaku untuk latar belakang tetapi sebenarnya pada latar
depan yang juga berarti elemen-elemen yang ditempatkan di atas bagian yang dapat disentuh atau bagian dalam komponen terjamah kami.
Jadi karena itu sekarang, ini juga pada gambar dan untuk menghormati sudut, sudut bulat, saya akan
melakukan ini sedikit berbeda, saya
akan menambahkan komponen yang dapat disentuh di dalam tampilan sekeliling saya daripada di luar, seperti itu
dan sekarang di sini saya akan menambahkan overflow yang tersembunyi pada gaya produk yang ada pada tampilan yang sekarang ada
di sekitar komponen yang dapat saya sentuh. Namun dengan itu, bayangan saya hilang seperti yang Anda tahu
dan di sini saya sekarang bahkan mendapatkan kesalahan bahwa saya perlu anak Bereaksi tunggal. Oleh karena itu mari kita sedikit men-tweak ini
dan mari kita tambahkan tampilan tambahan di sini, tampilan tambahan yang membungkus semuanya, seluruh
komponen saya yang dapat disentuh di dalam tampilan luar dan pada tampilan ekstra itu, saya akan menambahkan gaya gaya yang dapat disentuh atau apa
pun Anda ingin memberi nama dan gaya yang dapat disentuh ini sekarang ditambahkan di sini di stylesheet saya.
Ini sekarang membuat prop tersembunyi
overflow, jadi kami menambahkan ini di sini dan ini sekarang juga menerima radius perbatasan yang sama yang kami miliki di
seluruh keranjang, jadi radius perbatasan 10 di sini dan ini sekarang akan memastikan bahwa kami menjaga bayangan kami, sehingga masih berfungsi karena overflow tersembunyi
akan memangkas ini dan sekarang untuk menghilangkan kesalahan lain di sini juga, kita bisa membungkus
lagi pandangan lain di sekitar semua konten di dalam komponen yang dapat disentuh sehingga kita akan memenuhi kriteria
ini dengan hanya memiliki satu item anak dalam komponen yang dapat disentuh dan sekarang dengan itu, kita
memiliki perilaku yang sama seperti sebelumnya di iOS. Mengangkut dengan cara tidak memicu navigasi
rincian ini yang baik dan di Android, kami sekarang
juga memiliki efek riak yang menghormati sudut bulat kami yang membawa kami ke
tampilan detail dan ke keranjang juga tidak melakukan apa yang seharusnya tidak dilakukan. .
Jadi dengan itu, sekarang kita memiliki navigasi yang kita butuhkan, kita
memiliki tampilan yang kita butuhkan di sini.
Sekarang kita bisa pergi ke halaman detail dan kita sekarang mungkin harus memastikan bahwa halaman detail ini juga terlihat seperti
seharusnya.