1
00:00:02,330 --> 00:00:06,200
Sekarang kadang-kadang bisa rumit untuk menambahkan banyak cek seperti itu dan

2
00:00:06,200 --> 00:00:09,920
di sini kita sudah memiliki tiga cek di header

3
00:00:09,920 --> 00:00:14,070
misalnya, tentu saja sesuatu yang bisa kita tambahkan tetapi mungkin tidak optimal.

4
00:00:14,480 --> 00:00:22,970
Alih-alih untuk menjaga objek gaya kita lebih bersih, kita bisa mengatur header di sini, misalnya basis

5
00:00:23,360 --> 00:00:37,110
header dan kemudian menambahkan headerIOS dan headerAndroid dan sekarang yang kita lakukan adalah kita mengambil semua gaya ini yang berubah berdasarkan platform keluar dari gaya dasar,

6
00:00:37,110 --> 00:00:39,600
menambahkannya di sini ke headerIOS

7
00:00:39,860 --> 00:00:44,830
dan headerAndroid dan pada headerIOS, kami hanya menjaga tampilan

8
00:00:44,970 --> 00:00:51,020
iOS di sini, begitu putih, maka warna ini untuk perbatasan di bagian

9
00:00:56,160 --> 00:01:04,100
bawah dan lebar piksel satu untuk perbatasan itu dan di sini di Android, kami menghapus

10
00:01:04,200 --> 00:01:13,200
centang ini dan menjaga warna primer sebagai warna latar belakang dan di sisi lain, kami menyingkirkan batas

11
00:01:13,200 --> 00:01:19,800
kami dengan menggunakan nilai-nilai ini atau dengan sepenuhnya menghapusnya dan tidak menyetelnya sama

12
00:01:19,800 --> 00:01:20,970
sekali.

13
00:01:20,970 --> 00:01:28,590
Sekarang kita hanya perlu memastikan bahwa kita menambahkan headerIOS atau headerAndroid dan untuk itu, kita bisa naik ke

14
00:01:28,690 --> 00:01:35,050
sini dan mengatur objek gaya kita di mana kita menggabungkan semua gaya dasar header

15
00:01:35,070 --> 00:01:45,500
kita sekarang, jadi ini selalu ditetapkan tetapi sekarang di samping itu, kita dapat bergabung dalam hasil pemilihan platform yang sekarang merupakan metode yang mengambil

16
00:01:45,500 --> 00:01:54,770
objek di mana kita harus menentukan kunci iOS dan menunjuk pada nilai atau dalam hal ini, objek yang ingin kita gunakan

17
00:01:54,770 --> 00:02:02,270
jika kita berada di iOS yang merupakan gaya. headerIOS dan tambahkan kunci Android dan arahkan ke

18
00:02:02,270 --> 00:02:05,310
gaya yang headerAndroid dan dengan

19
00:02:05,540 --> 00:02:12,380
yang kita katakan Bereaksi Asli silakan bergabung dengan properti nilai, dalam hal ini, objek yang

20
00:02:12,380 --> 00:02:15,680
kita pilih untuk iOS dan untuk Android.

21
00:02:15,680 --> 00:02:21,410
Jadi Anda akan selalu harus melewati objek ke platform pilih dan kemudian Anda memiliki nilai yang berbeda untuk iOS dan

22
00:02:21,410 --> 00:02:26,390
Android dan nilai di sini juga bisa berupa angka, tidak akan berfungsi di sini karena di

23
00:02:26,390 --> 00:02:32,350
sini kita benar-benar mengharapkan suatu objek sehingga kita dapat tarik semua pasangan nilai properti dan berikan pada gaya kami di sekitarnya.

24
00:02:32,360 --> 00:02:37,310
Jadi di sini angka tidak masuk akal tetapi Anda dapat menggunakan pilih dengan segala jenis nilai,

25
00:02:37,370 --> 00:02:38,960
di sini kita hanya

26
00:02:39,020 --> 00:02:45,410
perlu objek, jadi kami menunjuk ke headerIOS dan objek headerAndroid. Dan dengan itu, kita memiliki kode yang lebih ramping, kita

27
00:02:45,680 --> 00:02:51,110
memiliki gaya yang lebih ramping di sana dan kemudian kita memiliki kode dengan gaya dasar di mana kita

28
00:02:51,110 --> 00:02:57,230
kemudian menggunakan platform pilih untuk secara dinamis memilih gaya yang berbeda berdasarkan pada platform yang kita jalankan dan karenanya sekarang, kami

29
00:02:57,230 --> 00:03:04,760
memiliki tampilan yang sama seperti sebelumnya tetapi sekarang dengan cara yang lebih elegan. Tempat lain di aplikasi kami tempat kami dapat memanfaatkan

30
00:03:04,760 --> 00:03:11,360
ini adalah tombol utama kami di sini. Tombol utama kami terlihat dan terasa sama di kedua platform

31
00:03:11,480 --> 00:03:14,780
yang tidak mengerikan tetapi juga mungkin bukan yang kita inginkan.

32
00:03:15,590 --> 00:03:21,590
Jika kita pergi ke MainButton kita. File js, kami melihat kami selalu menggunakan opacity yang dapat disentuh di sini

33
00:03:21,590 --> 00:03:23,940
tetapi sebenarnya di Android, kami mungkin ingin menggunakan efek riak.

34
00:03:23,990 --> 00:03:30,740
Untungnya, React Native memiliki komponen umpan balik asli yang dapat disentuh yang sebenarnya memberi kita objek yang dapat

35
00:03:30,740 --> 00:03:33,830
disentuh yang memiliki efek riak bawaan, jadi

36
00:03:33,920 --> 00:03:38,730
kami ingin menggunakannya di Android dan opacity yang dapat disentuh di iOS.

37
00:03:38,810 --> 00:03:44,300
Sekarang tentu saja, kita dapat menggunakan platform API yang karenanya kita juga harus mengimpor dari React

38
00:03:44,330 --> 00:03:47,510
Native untuk menggunakan komponen yang berbeda di sini berdasarkan

39
00:03:47,630 --> 00:03:52,520
pada platform dan untuk itu kita dapat menggunakan fitur yang sangat rapi. React belum

40
00:03:52,520 --> 00:03:54,200
React Native spesifik tetapi

41
00:03:54,290 --> 00:04:00,200
kita dapat menggunakan dalam Bereaksi secara umum, kita dapat mengatur variabel yang dimulai dengan karakter kapital sehingga kita

42
00:04:00,230 --> 00:04:07,430
dapat menggunakannya sebagai elemen jsx karena hanya variabel karakter kapital yang dapat digunakan sebagai elemen jsx dan kita beri nama ini

43
00:04:07,490 --> 00:04:12,170
katakan saja komponen tombol, nama sepenuhnya terserah Anda dan secara default, itu opacity terjamah.

44
00:04:12,170 --> 00:04:19,730
Jadi saya menunjuk objek opacity yang dapat disentuh di sini, tanpa tanda kurung, hanya menunjuk seperti ini.

45
00:04:19,730 --> 00:04:27,350
Sekarang kita dapat menambahkan cek jika dan periksa apakah platform OS sama dengan Android dan penting, periksa

46
00:04:27,350 --> 00:04:29,230
juga yang lain di

47
00:04:29,240 --> 00:04:37,210
platform, juga periksa apakah versi platform lebih besar atau sama dengan 21 karena hanya Android API versi 21 atau

48
00:04:37,230 --> 00:04:40,040
lebih tinggi yang mendukung efek riak.

49
00:04:40,100 --> 00:04:46,130
Jadi jika keduanya benar, maka kita akan mengatur komponen tombol menjadi umpan balik asli yang dapat disentuh sehingga kita akan

50
00:04:46,130 --> 00:04:50,480
menggunakan yang dengan efek riak, kalau tidak kita akan menggunakan yang dengan efek opacity.

51
00:04:50,600 --> 00:04:56,930
Jadi jika kita menggunakan Android dan versi Android cukup tinggi, ini 21 atau lebih tinggi, maka

52
00:04:56,930 --> 00:05:03,350
kita menggunakan umpan balik asli yang dapat disentuh. Sekarang karena saya beri nama ini dengan huruf kapital, kita bisa menggunakan ini

53
00:05:03,350 --> 00:05:12,260
di sini alih-alih opacity yang bisa disentuh dalam kode jsx kita, terlihat aneh pada awalnya tetapi akan bekerja dengan baik. Jika sekarang kita menyimpan ini dan me-restart ini,

54
00:05:12,500 --> 00:05:22,640
Anda akan melihat sekarang di sini Anda memiliki efek riak, Anda dapat melihatnya jika kita menekan dan menahan, Anda

55
00:05:22,640 --> 00:05:29,450
melihat efek riak pada tombol. Belum terlihat sempurna karena itu sebenarnya persegi panjang dan

56
00:05:29,450 --> 00:05:33,350
tidak menghormati radius perbatasan kami dan kami akan memperbaikinya tetapi berfungsi

57
00:05:33,350 --> 00:05:40,340
dan di sisi lain di sini di iOS, kami memiliki efek opacity seperti yang Anda tahu jika Anda menekan ini.

58
00:05:40,340 --> 00:05:47,990
Jadi sekarang mari kita perbaiki radius perbatasan dan kita bisa melakukannya dengan membungkus ini dengan tampilan lain dan itu

59
00:05:47,990 --> 00:05:51,780
hanya sedikit peretasan, sedikit solusi yang perlu Anda ketahui.

60
00:05:52,010 --> 00:05:57,490
Kami membungkus ini dengan tampilan lain di mana saya mengatur gaya katakanlah

61
00:05:58,480 --> 00:06:07,430
wadah tombol, tambahkan gaya itu di sana di stylesheet kami dan pada wadah tombol di sini yang sekarang membungkus segalanya, saya

62
00:06:07,430 --> 00:06:08,640
mengatur radius

63
00:06:08,780 --> 00:06:17,910
perbatasan yang sama seperti saya mengatur pada tombol , jadi 25 dalam hal ini di sini dan saya menambahkan overflow tersembunyi

64
00:06:18,000 --> 00:06:25,320
yang berarti bahwa setiap komponen anak yang akan melampaui batas-batas komponen ini, sehingga komponen dengan gaya ini

65
00:06:25,320 --> 00:06:31,170
pada dasarnya terpotong dan ini akan memastikan bahwa efek riak yang sekarang menjadi

66
00:06:31,170 --> 00:06:36,670
komponen anak dari tampilan ini akan terpotong di tepi bulat tombol ini.

67
00:06:37,210 --> 00:06:44,070
Jadi sekarang jika kita menyimpan ini dan coba lagi ini, Anda akan melihat bahwa efek riak hanya mengisi tombol, yang tentu

68
00:06:44,070 --> 00:06:50,200
saja terlihat jauh lebih baik dan pada iOS tentu saja, kita masih memiliki perilaku yang sama seperti sebelumnya.

69
00:06:51,070 --> 00:06:55,750
Jadi menggunakan platform di sini dalam tanda if juga sesuatu yang bisa kita lakukan tetapi

70
00:06:55,780 --> 00:07:01,180
kita juga bisa menggunakan trik rapi ini untuk membuat komponen yang sangat berbeda berdasarkan pada platform yang kita

71
00:07:01,180 --> 00:07:01,780
jalankan.