react native fast shadow

? React-asli-cepat-shadow

Bayangan Android berkualitas tinggi dan berkualitas tinggi untuk React Native

Mengapa

React Native hanya mendukung bayangan di android melalui prop ketinggian tetapi mencapai efek yang diinginkan seringkali tidak mungkin karena hanya datang dengan preset yang sangat sedikit. Perpustakaan pihak ketiga telah dibuat untuk menghindari hal ini tetapi ketika digunakan pada banyak pandangan, mereka dapat membuat aplikasi Anda lebih lambat atau secara signifikan meningkatkan konsumsi memorinya.

Fitur

• ? ‍️ Mudah digunakan: Penggantian drop-in untuk komponen <View>
• ⚡️ Performant: Bayangan dapat diterapkan pada sejumlah besar tampilan tanpa dampak kinerja yang signifikan. Ini telah dioptimalkan untuk konsumsi memori yang rendah dan rendering cepat
• ? Disesuaikan: Mendukung semua alat peraga bayangan biasa, shadowRadius , shadowColor , shadowOpacity dan shadowOffset
• Universal: Bekerja di semua platform. Di iOS dan Web, <ShadowedView> hanyalah alias dari <View>

Memulai

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

Penggunaan:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

Shadowstyle ():

Utilitas shadowStyle() juga dapat digunakan untuk membuatnya lebih mudah untuk membuat gaya bayangan dan untuk menjaga bayangan platform accross yang konsisten . Ini akan membuat prop style yang sama seperti di atas, tetapi akan membagi jari-jari bayangan dengan 2 di iOS (seperti untuk beberapa alasan, bayangan iOS terlalu besar dengan faktor 2 bila dibandingkan dengan alat desain atau dengan shadows kotak CSS):

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

Cara kerjanya di bawah kap mesin

Di Android, Shadow Drawables dihasilkan dengan proses berikut (lihat ShadowFactory.java untuk lebih detail):

1. Bentuk tampilan (persegi panjang dengan sudut bundar) dicat hitam di atas kanvas
2. Blur Gaussian diterapkan pada kanvas dengan shadowRadius yang diberikan menggunakan RenderScript API
3. Drawable kemudian dikonversi menjadi ninepatchdrawable untuk memastikan bahwa sudut -sudut bayangan tidak akan terdistorsi ketika tampilan diubah ukurannya. Dengan cara ini, kita hanya dapat menghasilkan bayangan kecil yang dapat ditarik dan menggunakannya kembali untuk semua pandangan dengan perbatasan yang sama dan jari -jari kabur.
4. Akhirnya, gambar yang dapat ditarik di belakang konten tampilan: diwarnai dengan shadowColor / shadowOpacity dan diimbangi menurut shadowOffset

Bagaimana cara kerja NinePatchDrawable (perhatikan bagaimana sudut -sudut tidak dikupas ketika penarikan diubah ukurannya):

Pemecahan masalah

React-asli-cepat-shadow hadir dengan keterbatasan berikut:

• Ini hanya berfungsi dengan persegi panjang bundar: tidak seperti implementasi IOS <View> , <ShadowedView> tidak akan berfungsi dengan tampilan bentuk gratis. Ia mengharapkan pandangan keturunan langsungnya menjadi persegi panjang bulat (hingga lingkaran). Solusi: Untuk elemen <Text> yang dibayangi, Anda dapat menggunakan TextShadowradius. Untuk bentuk yang kompleks, React-Native-Androw adalah pilihan terbaik Anda.
• <wadoedview> mengharapkan tampilan anaknya untuk mengisinya: terserah Anda untuk memastikan bahwa <ShadowedView> dan anak -anaknya memiliki ukuran yang sama, jika tidak bayangan akan lebih besar dari konten (Anda dapat memikirkan <ShadowedView> sebagai tampilan dengan warna latar belakang).
• Radii sudut tidak dapat disimpulkan secara tidak benar: Kami menggunakan gaya <ShadowedView> atau gaya anak langsungnya untuk menyimpulkan jari -jari sudut untuk diaplikasikan. Jika hierarki pandangan Anda lebih kompleks, jari -jari sudut mungkin tidak disimpulkan dengan benar. Solusi: Kerjakan ulang hierarki pandangan Anda atau lewati borderRadius langsung ke prop style <ShadowedView> .
• Radius bayangan dibatasi hingga 25 atau di bawah: Keterbatasan ini berasal dari efek blur Renderscript. Solusi: Beri tahu kami jika ini masalah bagi Anda. Ini mungkin dapat dikerjakan dengan menurunkan bitmap bayangan sebelum menerapkan efek blur.

Benchmark

Tabel berikut membandingkan konsumsi memori react-native-fast-shadow , react-native-androw dan react-native-shadow-2 ketika merender 100 150x200pt <Image> pada piksel 2 dengan bayangan radius 12pt. Aplikasi ini dibangun menggunakan varian Debug dan Hermes.

Tidak ada bayangan	react-native-shadow-2	React-native-androw	React-asli-cepat-shadow
117MB (Ref)	430MB (+313MB)	403MB (+286MB)	123MB (+6MB)