Ada beberapa hal di mana kita bisa
melanjutkan tetapi saya ingin melanjutkan dengan wadah input, yaitu wadah di sekitar input
ini, jadi di sekitar pilih teks angka, di sekitar input teks di sini dan di sekitar tombol dan wadah ini
memiliki lebar dan menyelaraskan item tetapi seperti yang saya jelaskan sebelumnya,
akan menyenangkan untuk memiliki kartu itu untuk dilihat
di sana dan untuk itu, kita memerlukan beberapa gaya yang lebih eksotis yang terdengar sangat mewah tetapi
hanya beberapa aturan gaya yang belum pernah kita gunakan sebelumnya.
Sebagai contoh, saya ingin menambahkan bayangan, sedikit bayangan
dan Anda melakukan ini dengan empat properti inti yang dapat Anda gunakan. Warna, offset, opacity, dan radius.
Sekarang warna bayangan harus jelas, itu warna bayangan Anda.
Shadow offset adalah seberapa banyak offset itu dari wadah
Anda dan itu benar-benar mengambil objek yang kemudian membutuhkan lebar dan tinggi,
jadi Anda bisa mengatakan saya ingin mengimbangi bayangan dengan dua piksel mengenai lebar dan oleh dua
piksel mengenai tinggi , yang memengaruhi efek tiga dimensi yang Anda buat. Opacity menggambarkan seberapa transparan bayangan ini, jika Anda mengatur opacity
menjadi 1, maka Anda
memiliki bayangan yang benar-benar transparan, sehingga bayangan yang sangat terlihat dan jika Anda menambah atau mengurangi yang harus
saya katakan, jika Anda menetapkan ke 0. 1 misalnya, Anda memiliki bayangan
yang hampir tidak dapat Anda lihat. Radius bayangan pada dasarnya menggambarkan seberapa tajam bayangan
itu, apakah memiliki tepi yang kasar atau jika sedikit lebih buram, lebih lunak, hal-hal seperti itu.
Jadi di sini, saya akan menggunakan warna bayangan hitam, dengan cara Anda juga dapat menggunakan kode hex
di sini jika Anda mau dan Anda juga dapat menggunakan kode RGBA jika Anda suka ini, baik kode RGB normal sebenarnya atau juga
dengan alfa saluran untuk menggambarkan transparansi di sini. Meskipun transparansi di sini tidak akan memiliki pengaruh
langsung, untuk bayangan Anda harus mengatur ini dengan opacity bayangan. Untuk warna lain, itu akan memiliki
pengaruh tetapi itu hanya catatan. Terlampir, Anda akan menemukan tautan dengan perincian lebih
lanjut tentang bagaimana Anda dapat mengonfigurasi warna dan nilai warna mana yang React Native terima karena jelas, itu jauh
lebih lengkap daripada yang bisa saya tunjukkan di sini, saya hanya akan menggunakan namanya karena saya ingin
warna hitam warna, jadi mengapa tidak pergi dengan jalan pintas itu? Sekarang selain warnanya, bayangan di sini juga akan menerima
offset dan seperti yang saya katakan, offset di sini mengambil objek.
Sekarang jika Anda bertanya-tanya bagaimana saya tahu ini, untuk satu IDE saya mengatakan kepada saya, jika saya mulai mengetik shadow offset
di sini, Anda melihat petunjuk yang saya dapatkan di sebelah kanan, Anda biasanya harus mendapatkan ini
juga, tetapi jika Anda tidak dapatkan ini, dokumen resmi tentu saja tempat untuk pergi dan di sana, selalu di
bawah panduan, komponen dan API, Anda dapat mengklik pada komponen tampilan di sana atau cukup klik pada dokumen API
di sini di sudut kanan atas dan kemudian pilih tampilan Anda di sana-sini, Anda akan menemukan beberapa prop gaya dan kemudian Anda dapat menemukan daftar semua
gaya tampilan yang didukung dan tentu saja juga bagaimana Anda mengonfigurasinya, dan di sana misalnya, Anda mengetahui bahwa
shadow offset adalah objek dengan angka dan tinggi. Untuk warna, Anda belajar bahwa ini membutuhkan warna dan
itulah tautan yang Anda temukan di sini, di mana ia menggambarkan jenis warna
apa yang dapat Anda gunakan.
Jadi itu hanya sedikit catatan, di sini saya akan menggunakan bayangan diimbangi dengan lebar nol tetapi tinggi 2
sehingga bayangan saya diimbangi sedikit ke bawah sehingga bisa dikatakan, tidak begitu banyak ke kanan, jadi tidak sama sekali ke kanan
sebenarnya dan saya kemudian juga akan menambahkan jari-jari bayangan yang merupakan jumlah mari kita coba enam dan coba lihat apa yang
dilakukannya dan yang
terakhir dan yang tidak kalah pentingnya, opacity bayangan 0. 26 yang relatif transparan tapi yang menurut saya
terlihat cukup bagus.
Selain itu, saya akan memberikan wadah input saya warna latar belakang putih untuk memastikan bahwa selalu putih dan
tidak transparan yang merupakan default sehingga jika kita akan memiliki warna latar belakang
lain di belakang wadah, katakanlah sebagai warna dasar dari seluruh layar, wadah di sini akan
selalu memiliki latar belakang putih.
Sekarang dengan itu, jika Anda menyimpan ini, Anda akan melihat bayangan yang terlihat seperti
ini di iOS tetapi Anda tidak melihat bayangan sama sekali di
Android dan itu bukan bug, sebaliknya properti bayangan di sini hanya bekerja di iOS dan yang meninggalkan satu yang penting pertanyaan, bagaimana
Anda bisa mengatur bayangan di Android? Apakah itu tidak mungkin?
Tetapi di sana Anda memiliki alat peraga gaya khusus, alat peraga ketinggian. Ini hanya berfungsi di Android karena tooltip juga
menunjukkan di sini, platform Android sedangkan properti bayangan hanya bekerja di iOS. Sekarang elevasi hanya membutuhkan beberapa misalkan 5 dan kemudian menggunakan
elevasi desain material Android default, sehingga Anda memiliki kontrol yang lebih sedikit di sana tetapi di
sisi lain, Anda mendapatkan tampilan desain material default yang pengguna Anda mungkin
gunakan untuk hal apa pun, jadi itu hal yang baik tentang ini dan sekarang
kami juga memiliki bayangan di Android dan iOS. Di iOS, Anda juga akan melihat bahwa bayangan terlihat di
kiri dan kanan kotak juga meskipun saya memberikan ini bayangan offset 0 untuk lebar, yang dapat dikontrol dengan
radius bayangan, jika Anda mengatur bayangan radius ke nol, maka Anda melihat Anda hanya memiliki bayangan
di mana Anda menentukan offset-nya di sini, sehingga Anda dapat memastikan bahwa bayangan itu benar-benar
hanya ada di tempat yang Anda inginkan. Jika Anda memang menetapkan radius shadow dan secara default,
ada juga radius shadow default, Anda mendapatkan efek spill yang merupakan bayangan yang
lebih alami, jadi di sini sebenarnya efek yang saya inginkan. Sekarang dengan itu, saya menambahkan bayangan di Android menggunakan
bayangan Android default dan di iOS. Ngomong-ngomong di Android, Anda tentu saja dapat
mengubah level ketinggian untuk bermain-main dengan berbagai level ketinggian hingga Anda memiliki tampilan yang Anda inginkan untuk aplikasi
Anda, pada dasarnya Anda memiliki cukup bayangan. Sekarang selain memiliki bayangan di sini,
saya pikir akan lebih baik untuk memiliki beberapa bantalan dalam kotak ini sekarang karena barang-barang
duduk terlalu dekat dengan tepi, mereka duduk langsung di tepi. Jadi untuk mengubah ini, saya juga akan menambahkan sedikit padding di sini
dan itu akan menjadi padding 20 dan lagi, itu nilai yang dapat Anda coba, temukan padding yang
Anda sukai secara pribadi dan menurut Anda itu terlihat bagus dan jika kami coba itu, sekarang ini terlihat jauh lebih baik.
Selain itu, sudut-sudut membulat akan
menjadi hal yang baik, jadi saya akan menambahkan jari-jari perbatasan di sini misalkan 10 memiliki batas yang sedikit membulat.
Jika sekarang kita simpan itu, ini terlihat cukup manis bagi saya di kedua platform, di kedua perangkat.
Jadi sekarang ini adalah wadah
input, kita tidak dapat melihat input dan tombol-tombol mungkin harus memiliki ukuran yang
sama juga, tetapi setidaknya, wadah sekarang terlihat bagus.