Generator Bayangan React Native

Bayangan di React Native bekerja berbeda pada tiap platform: iOS membaca shadowColor, shadowOffset, shadowOpacity, dan shadowRadius, sementara Android mengabaikan semuanya dan memerlukan angka elevation terpisah. Sesuaikan bayangan secara visual di sini dan salin objek gaya yang mencakup kedua platform, ditambah string boxShadow lintas platform yang lebih baru untuk aplikasi pada New Architecture.

Apa Itu Alat Ini?

Di React Native, bayangan tidak lintas platform secara default. iOS menggunakan empat prop gaya terpisah (shadowColor, shadowOffset dengan width/height, shadowOpacity dari 0-1, dan shadowRadius untuk blur) yang dipetakan ke bayangan CoreAnimation yang sama seperti yang digunakan box-shadow di web. Sistem View native Android sama sekali tidak mendukung bentuk bayangan sembarang — ia hanya mendukung elevation, satu angka yang menghasilkan bayangan Material Design tetap berdasarkan seberapa "tinggi" tampilan tersebut terlihat melayang.

Ini berarti bayangan yang terlihat pas di iOS menggunakan shadowRadius/shadowOpacity tidak akan menampilkan apa pun di Android kecuali Anda juga mengatur elevation, dan keduanya tidak akan pernah terlihat identik piksel demi piksel karena bentuk bayangan elevation tidak dapat disesuaikan seperti milik iOS. Sejak React Native 0.74 dengan New Architecture diaktifkan, properti gaya boxShadow lintas platform juga tersedia, menggunakan sintaks yang sama seperti CSS.

Mengapa Menggunakannya?

Lihat pratinjau visual langsung saat Anda menyesuaikan offset, blur, opacity, dan warna — alih-alih menebak nilai dan membangun ulang aplikasi untuk memeriksanya.
Dapatkan prop bayangan iOS, elevation Android, dan string boxShadow lintas platform yang lebih baru sekaligus, sehingga Anda tidak perlu mencari tiga API berbeda.
Elevation adalah kontrol terpisah (tidak dihitung otomatis dari blur/opacity) karena pemetaan elevation ke tampilan bayangan Android bukan terjemahan langsung dari properti bayangan iOS — Anda perlu menyesuaikannya agar cocok secara visual, dan alat ini memungkinkan Anda melakukannya berdampingan.
Gratis, instan, dan siap disalin sebagai satu objek gaya.

Cara Menggunakan

Sesuaikan offset X/Y, radius blur, opacity, dan warna bayangan — kotak pratinjau diperbarui secara langsung.
Sesuaikan angka elevation Android secara terpisah hingga secara visual cocok dengan kekuatan bayangan yang Anda inginkan.
Klik "Salin" untuk menyalin objek gaya lengkap, termasuk prop iOS, elevation Android, dan string boxShadow.
Tempelkan objek tersebut ke StyleSheet komponen Anda — sebarkan (spread) atau gabungkan dengan gaya tampilan yang sudah ada.

Contoh

Input

Offset (0, 4), blur 8, opacity 0.25, hitam, elevation 5

Output

shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'

shadowRadius diatur menjadi setengah dari nilai blur yang ditampilkan pada pratinjau, sesuai dengan bagaimana radius blur CSS berkaitan dengan shadowRadius iOS dalam praktiknya.

Pertanyaan yang Sering Diajukan

Mengapa bayangan saya tidak muncul di Android?

Prop shadowColor/shadowOffset/shadowOpacity/shadowRadius hanya untuk iOS — rendering native Android begitu saja mengabaikannya. Anda juga perlu mengatur prop elevation (angka positif) agar bayangan muncul di Android sama sekali.

Bisakah saya membuat bayangan Android terlihat identik dengan iOS?

Tidak persis — elevation menghasilkan bentuk bayangan Material Design bawaan Android, yang tidak dapat dikonfigurasi secara independen untuk warna, arah offset, atau blur seperti bayangan iOS. Anda dapat menyesuaikan angka elevation untuk mendapatkan kekuatan yang mirip secara visual, tetapi kecocokan sempurna piksel demi piksel antar platform tidak mungkin dilakukan dengan API shadow/elevation klasik.

Apa itu prop boxShadow dan bisakah saya menggunakannya sebagai gantinya?

boxShadow adalah properti gaya lintas platform yang lebih baru dan benar-benar universal (ditambahkan di React Native 0.74, tersedia pada New Architecture) yang menggunakan sintaks string yang sama seperti box-shadow CSS dan bekerja identik di iOS maupun Android. Jika versi React Native dan arsitektur aplikasi Anda mendukungnya, Anda dapat menggunakan hanya satu properti ini alih-alih empat prop iOS terpisah plus elevation — periksa versi RN dan status New Architecture Anda sebelum mengandalkannya di produksi.

Mengapa shadowRadius setengah dari nilai blur yang saya atur?

Pratinjau langsung menggunakan box-shadow CSS, di mana nilai blur menyebar kira-kira dua kali lebih jauh dibanding shadowRadius iOS untuk angka yang sama. Kode yang dihasilkan mengatur shadowRadius menjadi setengah nilai blur Anda sehingga bayangan yang Anda lihat di pratinjau cocok dengan yang sebenarnya dirender iOS — jika Anda menyalin nilai blur secara langsung, bayangan iOS akan terlihat jauh lebih lembut dan lebih besar dibanding pratinjau.

Apakah saya perlu Platform.select untuk menerapkan gaya-gaya ini?

Tidak — aman untuk meletakkan prop shadow* iOS dan elevation Android bersama-sama dalam satu objek gaya, persis seperti yang dilakukan kode yang dihasilkan: setiap platform begitu saja mengabaikan prop milik platform lain. Platform.select hanya layak ditambahkan jika Anda ingin desain bayangan yang benar-benar berbeda per platform, bukan sekadar untuk menghindari peringatan (tidak ada peringatan).

Saya sudah mengatur elevation tapi bayangan Android masih belum muncul — kenapa?

Dua penyebab paling umum: tampilan tidak memiliki backgroundColor (bayangan elevation Android dipancarkan dari latar belakang tampilan yang opak, sehingga tampilan transparan tidak memancarkan bayangan apa pun), atau induknya memiliki overflow: 'hidden' dan memotong bayangan tersebut. Berikan tampilan warna latar belakang solid dan periksa pengaturan overflow leluhurnya sebelum menganggap nilai elevation salah.