Sekarang kadang-kadang bisa rumit untuk menambahkan banyak cek seperti itu dan
di sini kita sudah memiliki tiga cek di header
misalnya, tentu saja sesuatu yang bisa kita tambahkan tetapi mungkin tidak optimal.
Alih-alih untuk menjaga objek gaya kita lebih bersih, kita bisa mengatur header di sini, misalnya basis
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,
menambahkannya di sini ke headerIOS
dan headerAndroid dan pada headerIOS, kami hanya menjaga tampilan
iOS di sini, begitu putih, maka warna ini untuk perbatasan di bagian
bawah dan lebar piksel satu untuk perbatasan itu dan di sini di Android, kami menghapus
centang ini dan menjaga warna primer sebagai warna latar belakang dan di sisi lain, kami menyingkirkan batas
kami dengan menggunakan nilai-nilai ini atau dengan sepenuhnya menghapusnya dan tidak menyetelnya sama
sekali.
Sekarang kita hanya perlu memastikan bahwa kita menambahkan headerIOS atau headerAndroid dan untuk itu, kita bisa naik ke
sini dan mengatur objek gaya kita di mana kita menggabungkan semua gaya dasar header
kita sekarang, jadi ini selalu ditetapkan tetapi sekarang di samping itu, kita dapat bergabung dalam hasil pemilihan platform yang sekarang merupakan metode yang mengambil
objek di mana kita harus menentukan kunci iOS dan menunjuk pada nilai atau dalam hal ini, objek yang ingin kita gunakan
jika kita berada di iOS yang merupakan gaya. headerIOS dan tambahkan kunci Android dan arahkan ke
gaya yang headerAndroid dan dengan
yang kita katakan Bereaksi Asli silakan bergabung dengan properti nilai, dalam hal ini, objek yang
kita pilih untuk iOS dan untuk Android.
Jadi Anda akan selalu harus melewati objek ke platform pilih dan kemudian Anda memiliki nilai yang berbeda untuk iOS dan
Android dan nilai di sini juga bisa berupa angka, tidak akan berfungsi di sini karena di
sini kita benar-benar mengharapkan suatu objek sehingga kita dapat tarik semua pasangan nilai properti dan berikan pada gaya kami di sekitarnya.
Jadi di sini angka tidak masuk akal tetapi Anda dapat menggunakan pilih dengan segala jenis nilai,
di sini kita hanya
perlu objek, jadi kami menunjuk ke headerIOS dan objek headerAndroid. Dan dengan itu, kita memiliki kode yang lebih ramping, kita
memiliki gaya yang lebih ramping di sana dan kemudian kita memiliki kode dengan gaya dasar di mana kita
kemudian menggunakan platform pilih untuk secara dinamis memilih gaya yang berbeda berdasarkan pada platform yang kita jalankan dan karenanya sekarang, kami
memiliki tampilan yang sama seperti sebelumnya tetapi sekarang dengan cara yang lebih elegan. Tempat lain di aplikasi kami tempat kami dapat memanfaatkan
ini adalah tombol utama kami di sini. Tombol utama kami terlihat dan terasa sama di kedua platform
yang tidak mengerikan tetapi juga mungkin bukan yang kita inginkan.
Jika kita pergi ke MainButton kita. File js, kami melihat kami selalu menggunakan opacity yang dapat disentuh di sini
tetapi sebenarnya di Android, kami mungkin ingin menggunakan efek riak.
Untungnya, React Native memiliki komponen umpan balik asli yang dapat disentuh yang sebenarnya memberi kita objek yang dapat
disentuh yang memiliki efek riak bawaan, jadi
kami ingin menggunakannya di Android dan opacity yang dapat disentuh di iOS.
Sekarang tentu saja, kita dapat menggunakan platform API yang karenanya kita juga harus mengimpor dari React
Native untuk menggunakan komponen yang berbeda di sini berdasarkan
pada platform dan untuk itu kita dapat menggunakan fitur yang sangat rapi. React belum
React Native spesifik tetapi
kita dapat menggunakan dalam Bereaksi secara umum, kita dapat mengatur variabel yang dimulai dengan karakter kapital sehingga kita
dapat menggunakannya sebagai elemen jsx karena hanya variabel karakter kapital yang dapat digunakan sebagai elemen jsx dan kita beri nama ini
katakan saja komponen tombol, nama sepenuhnya terserah Anda dan secara default, itu opacity terjamah.
Jadi saya menunjuk objek opacity yang dapat disentuh di sini, tanpa tanda kurung, hanya menunjuk seperti ini.
Sekarang kita dapat menambahkan cek jika dan periksa apakah platform OS sama dengan Android dan penting, periksa
juga yang lain di
platform, juga periksa apakah versi platform lebih besar atau sama dengan 21 karena hanya Android API versi 21 atau
lebih tinggi yang mendukung efek riak.
Jadi jika keduanya benar, maka kita akan mengatur komponen tombol menjadi umpan balik asli yang dapat disentuh sehingga kita akan
menggunakan yang dengan efek riak, kalau tidak kita akan menggunakan yang dengan efek opacity.
Jadi jika kita menggunakan Android dan versi Android cukup tinggi, ini 21 atau lebih tinggi, maka
kita menggunakan umpan balik asli yang dapat disentuh. Sekarang karena saya beri nama ini dengan huruf kapital, kita bisa menggunakan ini
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,
Anda akan melihat sekarang di sini Anda memiliki efek riak, Anda dapat melihatnya jika kita menekan dan menahan, Anda
melihat efek riak pada tombol. Belum terlihat sempurna karena itu sebenarnya persegi panjang dan
tidak menghormati radius perbatasan kami dan kami akan memperbaikinya tetapi berfungsi
dan di sisi lain di sini di iOS, kami memiliki efek opacity seperti yang Anda tahu jika Anda menekan ini.
Jadi sekarang mari kita perbaiki radius perbatasan dan kita bisa melakukannya dengan membungkus ini dengan tampilan lain dan itu
hanya sedikit peretasan, sedikit solusi yang perlu Anda ketahui.
Kami membungkus ini dengan tampilan lain di mana saya mengatur gaya katakanlah
wadah tombol, tambahkan gaya itu di sana di stylesheet kami dan pada wadah tombol di sini yang sekarang membungkus segalanya, saya
mengatur radius
perbatasan yang sama seperti saya mengatur pada tombol , jadi 25 dalam hal ini di sini dan saya menambahkan overflow tersembunyi
yang berarti bahwa setiap komponen anak yang akan melampaui batas-batas komponen ini, sehingga komponen dengan gaya ini
pada dasarnya terpotong dan ini akan memastikan bahwa efek riak yang sekarang menjadi
komponen anak dari tampilan ini akan terpotong di tepi bulat tombol ini.
Jadi sekarang jika kita menyimpan ini dan coba lagi ini, Anda akan melihat bahwa efek riak hanya mengisi tombol, yang tentu
saja terlihat jauh lebih baik dan pada iOS tentu saja, kita masih memiliki perilaku yang sama seperti sebelumnya.
Jadi menggunakan platform di sini dalam tanda if juga sesuatu yang bisa kita lakukan tetapi
kita juga bisa menggunakan trik rapi ini untuk membuat komponen yang sangat berbeda berdasarkan pada platform yang kita
jalankan.