1
00:00:02,120 --> 00:00:08,560
Saat ini dalam komponen item produk kami di sini di folder komponen, tombol-tombolnya adalah bagian dari komponen, demikian juga

2
00:00:08,580 --> 00:00:10,660
komponen yang dapat disentuh yang dibungkus.

3
00:00:12,480 --> 00:00:18,990
Kami tidak dapat mengubah komponen yang dapat terjamah sebanyak itu karena itu berada di sekitar konten kami di sini

4
00:00:18,990 --> 00:00:25,200
dan itu juga bukan masalah besar karena pada layar admin di sini, saya juga ingin barang-barang itu dapat

5
00:00:25,590 --> 00:00:30,210
disentuh tetapi saya ingin pergi ke layar edit saya di sana. kasus.

6
00:00:30,360 --> 00:00:33,530
Saya juga ingin memiliki dua tombol - satu untuk

7
00:00:33,540 --> 00:00:37,710
mengedit dan satu untuk menghapus tetapi tentu saja keterangan dan tindakan harus berbeda.

8
00:00:38,370 --> 00:00:46,150
Sekarang kita dapat meneruskan teks teks ini di sini sebagai alat peraga dan mengganti nama alat peraga yang kita picu ketika tombol-tombol ditekan

9
00:00:46,150 --> 00:00:50,880
dengan cara yang lebih umum, sehingga kita dapat menggunakannya untuk melihat detail pada layar

10
00:00:50,920 --> 00:00:59,500
ikhtisar produk dan untuk mengedit atau menghapus pada layar produk pengguna. Ada juga cara alternatif untuk menangani

11
00:00:59,500 --> 00:01:00,320
ini.

12
00:01:00,370 --> 00:01:07,720
Jadi untuk satu ketika kita menekan komponen ini secara umum, saya akan mengganti nama ini menjadi pilih untuk memiliki nama yang lebih umum yang

13
00:01:07,720 --> 00:01:12,000
masuk akal dalam array yang lebih luas dari kasus penggunaan dan saya juga

14
00:01:12,770 --> 00:01:15,810
akan mengubah cara kita menerima tombol-tombol ini di sini.

15
00:01:15,890 --> 00:01:22,310
Saya akan memotong mereka dari sini dan sebagai gantinya, menampilkan alat peraga anak-anak di sini yang merupakan alat peraga khusus yang merujuk pada apa

16
00:01:22,310 --> 00:01:29,560
pun yang kami lewati antara label pembuka dan penutup dari komponen kami sendiri. Sekarang dengan itu, saya juga bisa menghilangkan warna impor di

17
00:01:29,560 --> 00:01:32,540
sini dan impor tombol dan sekarang pergi ke tempat-tempat

18
00:01:32,830 --> 00:01:35,180
di mana kita menggunakan item

19
00:01:35,230 --> 00:01:38,010
produk, itu akan menjadi layar ikhtisar produk misalnya.

20
00:01:38,290 --> 00:01:44,100
Di sana kita sekarang harus mengimpor komponen tombol dan pastikan Anda mengimpor

21
00:01:44,110 --> 00:01:46,150
warna Anda, jadi

22
00:01:48,490 --> 00:01:57,630
impor warna dari warna konstanta dan sekarang pergi ke item produk Anda dan mengubahnya dari komponen penutupan sendiri ke

23
00:01:57,630 --> 00:02:00,450
komponen yang telah Anda tutup dan

24
00:02:00,450 --> 00:02:06,090
buka dengan tag komponen sendiri. Di antara tag-tag ini, Anda sekarang dapat menambahkan kembali

25
00:02:06,090 --> 00:02:13,680
dua tombol ini dan sekarang tentu saja, jangan gunakan alat peraga pada detail tampilan dan alat peraga di tambahkan ke keranjang di sini, tetapi sebaliknya,

26
00:02:13,680 --> 00:02:18,690
tambahkan logika Anda di sini karena sekarang kami secara dinamis melewati ini dalam komponen item produk

27
00:02:18,690 --> 00:02:21,950
tetapi karena itu kami dapat melewati tombol yang berbeda tergantung di

28
00:02:21,960 --> 00:02:26,970
mana kami menggunakan komponen item produk itu. Jadi sekarang di sini saya akan menambahkan

29
00:02:29,840 --> 00:02:39,030
handler baru, pilih item handler misalnya yang hanya fungsi yang disimpan dalam konstanta seperti ini dan di sana saya ingin melakukan apa yang saya lakukan sebelumnya pada detail

30
00:02:39,140 --> 00:02:42,280
tampilan, saya akan memotong itu dan menambahkannya di sini

31
00:02:42,350 --> 00:02:48,440
dan saya berharap untuk mendapatkan ID dan judul di sini sebagai argumen sehingga saya dapat meneruskan ID dan judul

32
00:02:48,440 --> 00:02:52,350
di sini seperti ini dan sekarang pilih penangan item adalah apa yang

33
00:02:52,610 --> 00:02:59,860
ingin saya picu di sini pada pilih, ingat bahwa saya menamai ini dalam item produk , yang dapat disentuh ini sekarang diaktifkan

34
00:02:59,870 --> 00:03:03,590
hanya pada pilih, jadi Anda harus mengubah nama ini di tempat-tempat

35
00:03:03,590 --> 00:03:09,770
di mana Anda menggunakan komponen seperti di sini dan kemudian di sini, saya menjalankan penangan item pilih saya di

36
00:03:09,770 --> 00:03:17,360
sini dan meneruskan itemData. barang. id dan itemData. barang. beri judul di

37
00:03:17,360 --> 00:03:23,690
sini sehingga data ini berakhir di fungsi ini. Saya melakukan ini karena sekarang saya dapat menggunakan item

38
00:03:23,690 --> 00:03:31,760
handler yang sama di sini pada tombol view details ini, pada dasarnya saya hanya dapat menyalin fungsi anonim ini dan menambahkannya di

39
00:03:31,760 --> 00:03:34,560
sini ke handler onPress tombol ini, jadi

40
00:03:34,610 --> 00:03:37,970
sekarang kita menggunakannya kembali dan menambahkan ke kereta, baik

41
00:03:38,060 --> 00:03:39,740
di sana kami kirim ini,

42
00:03:39,890 --> 00:03:45,320
ini sekarang dihapus di sini dari komponen item produk karena di sana kita tidak lagi

43
00:03:45,320 --> 00:03:52,340
memiliki prop itu, sebaliknya sekarang di sini, prop ini yang mengambil fungsi anonim ini yang kemudian pada akhirnya harus mengirimkan

44
00:03:52,340 --> 00:03:53,510
tindakan ini.

45
00:03:53,900 --> 00:04:00,170
Jadi sekarang perubahan utama adalah bahwa saya memindahkan tombol dari komponen, dari komponen item produk ke komponen layar gambaran

46
00:04:00,170 --> 00:04:05,930
umum produk dan yang memungkinkan kita untuk tetap melakukan hal yang sama seperti sebelumnya, jika saya simpan

47
00:04:05,930 --> 00:04:11,330
itu, yang seharusnya masih berfungsi seperti sebelum. Kami dapat mengetuk suatu item, kami dapat

48
00:04:11,330 --> 00:04:15,420
mengetuk detail tampilan, kami dapat mengetuk ke troli dan itu semua berfungsi tetapi

49
00:04:15,740 --> 00:04:18,890
sekarang kami juga dapat menyesuaikan ini di layar produk pengguna.

50
00:04:19,250 --> 00:04:28,410
Jadi di sana saya juga akan menyalin tombol-tombol ini dan pergi ke layar produk pengguna dan di sana, tombol impor dari React Native,

51
00:04:28,470 --> 00:04:36,870
impor warna kami konstan karena kami akan membutuhkannya untuk tombol-tombol dari warna konstanta dan kemudian di sini di item produk ,

52
00:04:37,320 --> 00:04:47,480
alih-alih menyiapkan ini, kita perlu mengurai prop pilih pada saat item secara umum disadap tetapi sekarang kita juga menambahkan tag pembuka dan penutup untuk komponen kustom

53
00:04:47,480 --> 00:04:49,450
kita sendiri dan lagi,

54
00:04:49,550 --> 00:04:53,240
tambahkan tombol kita di sini tetapi alih-alih melihat detail,

55
00:04:53,240 --> 00:04:55,380
sekarang Saya katakan edit dan

56
00:04:55,490 --> 00:05:01,940
hapus dan untuk saat ini, saya bisa menghapus semua logika lainnya karena untuk saat ini, kami

57
00:05:02,060 --> 00:05:06,380
tidak memiliki logika untuk mengedit dan menghapus tetapi itu adalah sesuatu

58
00:05:06,380 --> 00:05:08,630
yang dapat kita tambahkan nanti.

59
00:05:08,870 --> 00:05:13,630
Dan di sini untuk pilih, itu juga hanya fungsi kosong untuk saat ini.

60
00:05:13,780 --> 00:05:19,690
Ini memiliki keuntungan bahwa sekarang kami memiliki barang-barang kami seperti yang kami miliki sebelumnya di sini tetapi di bagian admin, kami

61
00:05:19,690 --> 00:05:21,430
sekarang telah mengedit dan menghapus dan

62
00:05:21,550 --> 00:05:26,290
ini memungkinkan kami untuk melakukan hal-hal yang berbeda dengan tetap menggunakan kembali komponen barang produk yang tentu

63
00:05:26,290 --> 00:05:27,330
saja cukup bagus.