React Native Shadow Generator

Bayang dalam React Native berfungsi secara berbeza mengikut platform: iOS membaca shadowColor, shadowOffset, shadowOpacity dan shadowRadius, manakala Android mengabaikan semua itu dan sebaliknya memerlukan nombor elevation yang berasingan. Laraskan bayang secara visual di sini dan salin objek style yang meliputi kedua-dua platform, ditambah dengan rentetan boxShadow merentas platform yang lebih baharu untuk aplikasi pada New Architecture.

Apakah alat ini?

Dalam React Native, bayang tidak merentas platform secara lalai. iOS menggunakan empat prop style berasingan (shadowColor, shadowOffset dengan width/height, shadowOpacity dari 0-1, dan shadowRadius untuk kekaburan) yang dipetakan kepada bayang CoreAnimation asas yang sama seperti box-shadow web. Sistem View asli Android langsung tidak menyokong bentuk bayang sembarangan — ia hanya menyokong elevation, satu nombor yang menghasilkan bayang lalai Material Design berdasarkan sejauh mana "tinggi" paparan itu kelihatan terapung.

Ini bermakna bayang yang kelihatan betul pada iOS menggunakan shadowRadius/shadowOpacity langsung tidak akan kelihatan pada Android melainkan anda turut menetapkan elevation, dan kedua-duanya tidak akan sama sekali serupa piksel demi piksel kerana bentuk bayang elevation tidak boleh disesuaikan seperti iOS. Bermula React Native 0.74 dengan New Architecture diaktifkan, sifat style boxShadow merentas platform turut tersedia, menggunakan sintaks yang sama seperti CSS.

Kenapa guna alat ini?

Lihat pratonton visual langsung semasa anda melaraskan offset, kekaburan, opacity dan warna — bukannya meneka nilai dan membina semula aplikasi anda untuk menyemaknya.
Dapatkan prop bayang iOS, elevation Android, dan rentetan boxShadow merentas platform yang lebih baharu sekali gus, jadi anda tidak perlu mencari tiga API berbeza.
Elevation ialah kawalan berasingan (tidak dikira secara automatik daripada kekaburan/opacity) kerana pemetaan elevation kepada rupa bayang pada Android bukan terjemahan langsung daripada sifat bayang iOS — ia sepatutnya dilaraskan secara visual supaya sepadan, dan alat ini membolehkan anda melakukannya secara bersebelahan.
Percuma, serta-merta, dan sedia disalin sebagai satu objek style tunggal.

Cara menggunakannya

Laraskan offset X/Y, jejari kekaburan, opacity dan warna bayang — kotak pratonton dikemas kini secara langsung.
Laraskan nombor elevation Android secara berasingan sehingga ia sepadan secara visual dengan kekuatan bayang yang anda inginkan.
Klik "Copy" untuk menyalin keseluruhan objek style, termasuk prop iOS, elevation Android, dan rentetan boxShadow.
Tampal objek itu ke dalam StyleSheet komponen anda — sebarkan (spread) atau gabungkan dengan style paparan sedia ada anda.

Contoh

Input

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

Hasil

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 ditetapkan kepada separuh nilai kekaburan yang ditunjukkan dalam pratonton, sepadan dengan cara blur radius CSS berkaitan dengan shadowRadius iOS pada praktiknya.

Soalan lazim

Mengapa bayang saya tidak kelihatan pada Android?

Prop shadowColor/shadowOffset/shadowOpacity/shadowRadius adalah khusus untuk iOS sahaja — pemaparan asli Android hanya mengabaikannya. Anda juga perlu menetapkan prop elevation (nombor positif) supaya bayang dapat dipaparkan pada Android.

Bolehkah saya menjadikan bayang Android kelihatan sama seperti bayang iOS?

Tidak sepenuhnya — elevation menghasilkan bentuk bayang Material Design terbina dalam Android, yang tidak boleh dikonfigurasi secara berasingan untuk warna, arah offset atau kekaburan seperti bayang iOS. Anda boleh melaraskan nombor elevation untuk mendapatkan kekuatan yang kelihatan serupa, tetapi padanan tepat piksel demi piksel antara platform tidak mungkin dicapai dengan API shadow/elevation klasik.

Apakah prop boxShadow dan bolehkah saya menggunakannya sebagai gantinya?

boxShadow ialah sifat style yang lebih baharu dan benar-benar merentas platform (ditambah dalam React Native 0.74, tersedia pada New Architecture) yang menggunakan sintaks rentetan yang sama seperti CSS box-shadow dan berfungsi secara sama pada iOS dan Android. Jika versi React Native dan seni bina aplikasi anda menyokongnya, anda boleh menggunakan hanya satu sifat ini sahaja sebagai ganti empat prop iOS berasingan serta elevation — semak versi RN dan status New Architecture anda sebelum bergantung padanya dalam pengeluaran.

Mengapa shadowRadius separuh daripada nilai kekaburan yang saya tetapkan?

Pratonton langsung menggunakan box-shadow CSS, di mana nilai kekaburan merebak kira-kira dua kali lebih jauh berbanding shadowRadius iOS untuk nombor yang sama. Kod yang dijana menetapkan shadowRadius kepada separuh nilai kekaburan anda supaya bayang yang anda lihat dalam pratonton sepadan dengan apa yang sebenarnya dipaparkan iOS — jika anda menyalin nilai kekaburan terus, bayang iOS akan kelihatan jelas lebih lembut dan lebih besar berbanding pratonton.

Adakah saya memerlukan Platform.select untuk menggunakan style ini?

Tidak — selamat untuk meletakkan prop shadow* iOS dan elevation Android bersama dalam satu objek style, tepat seperti yang dilakukan oleh kod yang dijana: setiap platform hanya mengabaikan prop platform yang satu lagi. Platform.select hanya berbaloi ditambah jika anda mahukan reka bentuk bayang yang benar-benar berbeza bagi setiap platform, bukan sekadar untuk mengelakkan amaran (tiada amaran sedemikian).

Saya telah menetapkan elevation tetapi bayang Android masih tidak muncul — kenapa?

Dua punca paling biasa: paparan itu tiada backgroundColor (bayang elevation Android dilontarkan daripada latar belakang legap paparan itu, jadi paparan lutsinar tidak melontarkan sebarang bayang), atau induk mempunyai overflow: 'hidden' dan memotong bayang tersebut. Berikan paparan itu warna latar belakang pejal dan semak tetapan overflow bagi moyang sebelum menganggap nilai elevation itu salah.