1
00:00:02,350 --> 00:00:07,000
Pada layar kategori, kami ingin memastikan bahwa barang kami dapat disentuh di sana,

2
00:00:07,020 --> 00:00:13,590
jadi saya akan mengimpor terjamah dan saya akan mengimpor opacity terjamah di sini untuk memiliki sedikit efek opacity tetapi

3
00:00:13,740 --> 00:00:15,000
tentu saja terserah

4
00:00:15,090 --> 00:00:17,100
Anda yang pola atau komponen mana

5
00:00:17,100 --> 00:00:23,730
yang Anda gunakan di sana, harus ada komponen yang dapat disentuh yang mana Anda membungkus item Anda di sini

6
00:00:23,730 --> 00:00:24,750
dan sekarang

7
00:00:24,750 --> 00:00:30,060
pada opacity terjamah, saya akan menambahkan onPress sehingga kita dapat melakukan sesuatu ketika ini ditekan.

8
00:00:30,060 --> 00:00:31,400
Apa yang ingin kita lakukan?

9
00:00:31,440 --> 00:00:38,760
Kami ingin pergi ke layar makanan kategori yang merupakan jenis halaman detail untuk kategori yang dipilih untuk menunjukkan semua resep

10
00:00:38,760 --> 00:00:40,830
untuk kategori itu, kami belum

11
00:00:40,830 --> 00:00:43,910
memiliki resep tetapi saya masih ingin pergi ke halaman.

12
00:00:44,610 --> 00:00:50,100
Jadi karena itu di sini, kita perlu memicu tindakan navigasi dan sebelumnya kita melakukan ini dengan navigasi alat

13
00:00:50,280 --> 00:00:51,470
peraga navigasi, kan?

14
00:00:51,480 --> 00:00:56,550
Masalahnya adalah, kami tidak memiliki alat peraga yang tersedia di sini karena kami berada di dalam fungsi item

15
00:00:56,670 --> 00:00:59,090
kotak render yang berada di luar komponen kami.

16
00:00:59,130 --> 00:01:04,610
Sekarang kita cukup memindahkan ini ke dalam komponen kita untuk memperbaiki masalah ini.

17
00:01:04,770 --> 00:01:10,470
Jika kita membuat fungsi itu di sana, maka kita memiliki akses ke alat peraga karena kita sekarang berada di dalam fungsi

18
00:01:10,470 --> 00:01:17,070
komponen kita dan sekarang kita akan dapat memanggil navigasi di sini. Kita dapat memanggil navigasi dan saya ingin pergi ke

19
00:01:17,070 --> 00:01:23,310
nama rute dan tentu saja nama rute yang ingin saya tuju dapat ditemukan di navigator kami adalah makanan

20
00:01:23,310 --> 00:01:27,510
kategori tepat, karena kami ingin memuat semua makanan untuk kategori yang dipilih.

21
00:01:27,510 --> 00:01:33,660
Jadi kita pergi ke makanan kategori di sini dan jika kita menambahkan ini dan kita menyimpan ini, kita melihat sekarang

22
00:01:33,660 --> 00:01:37,560
styling kita agak rusak, saya akan memperbaikinya dalam sedetik tetapi navigasi berfungsi,

23
00:01:37,560 --> 00:01:44,520
kita juga memiliki efek opacity ini, jadi itu berfungsi . Sekarang memperbaiki styling itu mudah, kami hanya kehilangan itu karena saya

24
00:01:44,520 --> 00:01:47,080
membungkus opacity yang dapat disentuh di sekitar pandangan

25
00:01:47,220 --> 00:01:53,760
saya, kami hanya perlu menambahkan gaya ini di sini yang menambahkan margin di sekitar item kami dan seterusnya ke opacity yang

26
00:01:53,760 --> 00:02:00,230
dapat disentuh alih-alih tampilan itu di sini dan dengan itu, kami mendapatkan gaya itu kembali dan ini sekarang berfungsi sebagaimana mestinya.

27
00:02:00,270 --> 00:02:06,630
Pertanyaan yang lebih menarik adalah, bagaimana kita bisa mengatur judul header kita? Sekarang untuk itu, kita mendapatkan beberapa

28
00:02:06,630 --> 00:02:07,720
opsi,

29
00:02:07,800 --> 00:02:13,740
mari kita lihat opsi nomor satu. Pada setiap komponen Bereaksi yang akan

30
00:02:13,740 --> 00:02:22,420
Anda muat sebagai layar, Artinya apa yang Anda petakan ke nama layar seperti misalnya navigator tumpukan, Anda dapat menambahkan properti.

31
00:02:22,410 --> 00:02:28,590
Sekarang perlu diingat bahwa layar kategori tentu saja komponen Bereaksi tetapi secara teknis, ini adalah fungsi

32
00:02:28,590 --> 00:02:29,370
Javascript, kan?

33
00:02:29,370 --> 00:02:34,290
Ini adalah fungsi yang menerima argumen props dan kemudian menjalankan tubuh ini yang mengembalikan beberapa

34
00:02:34,290 --> 00:02:37,390
jsx dan karenanya React dapat menggunakan ini sebagai komponen tetapi

35
00:02:37,530 --> 00:02:39,840
secara teknis, ini adalah fungsi Javascript.

36
00:02:39,840 --> 00:02:43,490
Sekarang fungsi Javascript hanyalah objek, itu Javascript,

37
00:02:43,500 --> 00:02:44,720
fungsi adalah

38
00:02:44,790 --> 00:02:52,800
objek dan pada objek, kita dapat menambahkan properti. Jadi layar kategori hanyalah objek Javascript, maka

39
00:02:52,890 --> 00:02:53,630
kita

40
00:02:53,730 --> 00:02:57,150
dapat menambahkan properti setelah membuatnya.

41
00:02:57,150 --> 00:03:07,040
Jadi di sini, setelah mendefinisikan fungsi layar kategori kami dan oleh karena itu objek ini, kami dapat mengaksesnya dan kami dapat

42
00:03:07,040 --> 00:03:13,250
menambahkan properti dengan notasi titik, itulah cara Javascript bekerja, Anda cukup menambahkan properti

43
00:03:13,250 --> 00:03:14,250
seperti itu.

44
00:03:14,260 --> 00:03:20,870
Sekarang Anda dapat menambahkan properti khusus di sini yang Bereaksi navigasi akan terlihat dan itulah

45
00:03:21,350 --> 00:03:22,970
properti opsi navigasi.

46
00:03:22,970 --> 00:03:26,270
Anda tidak harus menambahkannya dan itu tidak akan menjadi masalah jika

47
00:03:26,270 --> 00:03:32,000
Anda tidak melakukannya, kami belum melakukannya sejauh ini tetapi Anda dapat menambahkannya, jika Anda menambahkannya, itu akan dihormati oleh Bereaksi navigasi.

48
00:03:33,210 --> 00:03:38,480
Sekarang ada banyak opsi yang dapat Anda atur di sana dan daftar lengkapnya tentu saja dapat

49
00:03:38,480 --> 00:03:40,120
ditemukan di dokumen resmi.

50
00:03:40,270 --> 00:03:45,100
Dalam bentuk yang paling sederhana, Anda cukup menetapkan objek Javascript di sini

51
00:03:45,100 --> 00:03:51,880
dengan sekelompok opsi yang sekarang dapat Anda atur di objek ini dan opsi yang saya tertarik di

52
00:03:52,030 --> 00:04:00,440
sini adalah judul header, yang dapat dengan mudah diatur ke teks, misalnya kategori makan karena kita berada di layar kategori sehingga akan

53
00:04:00,430 --> 00:04:03,970
menjadi judul yang pas. Jika kami menyimpan

54
00:04:03,970 --> 00:04:09,090
ini, Anda sekarang melihat kategori makanan sebagai judul di sini di header.

55
00:04:09,120 --> 00:04:14,970
Sekarang Anda juga dapat mendesain tajuk di sini dengan bantuan properti gaya tajuk, ini mengambil objek gaya

56
00:04:14,970 --> 00:04:21,200
di mana Anda secara umum dapat mengatur apa yang dapat Anda atur sebagai gaya pada tampilan juga dan di

57
00:04:21,310 --> 00:04:27,090
sana, Anda dapat menambahkan warna latar belakang yang merupakan gaya paling umum yang biasanya Anda terapkan.

58
00:04:27,210 --> 00:04:32,610
Sekarang saya ingin mengatur warna di sini dan saya akan menggunakan pendekatan yang saya gunakan sebelumnya

59
00:04:32,670 --> 00:04:43,350
dalam kursus, saya akan menambahkan folder konstanta dan di sana, saya akan menambahkan warna. File js di mana saya kemudian akan mengekspor objek Javascript di mana

60
00:04:43,440 --> 00:04:48,470
semua warna yang ingin saya gunakan berulang kali dalam aplikasi diatur.

61
00:04:48,600 --> 00:04:56,790
Di sana, saya akan mengatur warna primer yang saya pilih kode hex # 4a148C tapi tentu saja Anda dapat bereksperimen dengan warna yang

62
00:04:56,790 --> 00:05:03,060
berbeda jika Anda mau dan saya akan mengatur warna aksen atau warna sekunder yang kode hex adalah

63
00:05:03,270 --> 00:05:07,920
# ff6f00 dan ini hanya warna yang saya pilih, seperti yang saya sebutkan,

64
00:05:07,920 --> 00:05:13,850
Anda dapat menggunakan yang berbeda tentu saja. Kembali pada layar kategori, sekarang saya ingin

65
00:05:13,860 --> 00:05:21,030
menggunakan warna dan untuk ini, Anda perlu mengimpornya, mengimpor warna dengan huruf C, yang hanya merupakan

66
00:05:21,030 --> 00:05:29,730
konvensi yang saya gunakan untuk menunjukkan bahwa ini adalah konstanta, dari konstanta / Warna , juga dinamai dengan huruf C dan

67
00:05:29,730 --> 00:05:38,420
kemudian di sini kita menggunakan Warna. primaryColor misalnya. Jika Anda melakukan ini, Anda akan melihat bahwa tajuk Anda

68
00:05:38,420 --> 00:05:43,730
sekarang memiliki warna ungu gelap yang saya pilih. Itu membuat judulnya sedikit sulit untuk dibaca tetapi

69
00:05:44,030 --> 00:05:48,670
untungnya, Anda dapat mendesain ini juga, tidak dengan gaya tajuk karena itu hanya kotak

70
00:05:48,720 --> 00:05:56,300
untuk tajuknya sehingga bisa dikatakan, bukan kontennya tetapi judulnya dapat ditata dengan warna warna tajuk dan sekali lagi, dokumen resmi adalah tempat di

71
00:05:56,450 --> 00:06:01,090
mana Anda dapat mempelajari semua tentang opsi yang tersedia ini, itulah yang saya ketahui

72
00:06:01,100 --> 00:06:02,380
tentang mereka, di

73
00:06:02,390 --> 00:06:04,470
situlah Anda akan membaca tentang mereka.

74
00:06:04,550 --> 00:06:10,820
Sekarang warna tajuk warna selalu dapat menjadi warna, misalnya putih di sini yang cocok dengan

75
00:06:10,820 --> 00:06:19,120
warna default saya dan sekarang Anda melihat ini putih. Anda tentu saja mungkin juga menginginkan tampilan yang berbeda untuk Android dan

76
00:06:19,120 --> 00:06:23,690
iOS, Anda mungkin ingin melihat di mana ini terlihat lebih iOS-ish yang berarti

77
00:06:23,740 --> 00:06:29,560
Anda tidak memiliki latar belakang berwarna tetapi hanya teks berwarna dan Anda dapat mencapainya dengan baik API

78
00:06:29,560 --> 00:06:35,980
platform lama yang Anda pelajari sebelumnya dalam kursus. Kita dapat menggunakan platform API untuk secara

79
00:06:35,980 --> 00:06:42,490
dinamis mengganti warna yang kita gunakan di sini berdasarkan platform yang digunakan oleh aplikasi kita.

80
00:06:42,490 --> 00:06:47,630
Jadi di sini untuk warna latar belakang, kita bisa menggunakan platform. os dan lihat apakah itu Android, dalam

81
00:06:47,640 --> 00:06:53,850
hal ini saya ingin menggunakan warna primer, kalau tidak dalam ekspresi ternary ini, saya tidak akan menggunakan warna,

82
00:06:53,920 --> 00:07:00,940
jadi kita bisa menggunakan putih di sini misalnya, latar belakang putih normal atau hanya mengatur tidak ada warna sama sekali seperti

83
00:07:00,940 --> 00:07:07,150
ini dan Anda akan mendapatkan warna latar belakang default. Dan untuk warna warna, itu sama,

84
00:07:07,150 --> 00:07:10,810
saya memeriksa apakah sistem operasi Android di mana warna

85
00:07:10,810 --> 00:07:20,360
teks harus putih, kalau tidak saya akan mengatur ini ke Warna. primaryColour dan dengan itu, Anda sekarang memiliki lebih banyak iOS ini, yang

86
00:07:20,360 --> 00:07:27,530
lebih khas iOS lihat di sini di iOS dan Anda memiliki tampilan Android default yang lebih berwarna pada Android.

87
00:07:27,530 --> 00:07:31,100
Jadi itulah bagaimana Anda dapat mengatur opsi navigasi

88
00:07:31,130 --> 00:07:39,170
di sini, sekarang bagaimana dengan layar ini, di mana kita pergi ke detail kami di sini, ke makanan

89
00:07:39,170 --> 00:07:45,500
Italia atau ke makanan cepat dan mudah? Alangkah baiknya jika kita bisa melihat cepat dan mudah di sini atau Italia di sini di

90
00:07:45,500 --> 00:07:46,400
header dalam kasus itu.

91
00:07:46,400 --> 00:07:51,230
Jadi itu hal berikutnya yang harus kita urus dan untuk ini, kita perlu meneruskan beberapa

92
00:07:51,230 --> 00:07:55,940
informasi dari layar ini ke layar ini. Jadi kita akan melihat cara kerjanya di video berikutnya.