react native shadow 2
v7.1.1
Penting
React asli 0,76 , dirilis pada 23 Oktober 2024 , akhirnya mendukung bayangan lintas platform!
Fitur baru ini harus lebih disukai daripada perpustakaan ini.
Saya hanya dapat dengan sepenuh hati menghargai dukungan dan kebaikan semua orang selama hampir 4 tahun dan merayakan mencapai 39k unduhan total mingguan dan 2m ?
Jika Anda mencari seorang profesional yang bersemangat dengan keahlian 5 tahun di TypeScript, bereaksi, dan bereaksi asli, hubungi saya di [email protected]!
React-native-Shadow sudah mati selama bertahun-tahun. Ini adalah versi yang ditingkatkan dengan lebih banyak fungsi, dukungan TypeScript dan ditulis dari awal. Tidak diperlukan untuk menentukan ukurannya: bayangan diterapkan dengan cerdas pada render pertama dan kemudian diterapkan kembali dengan tepat pada yang berikut.
Ini memecahkan edisi asli React yang lama tidak memiliki penampilan dan penggunaan bayangan yang sama untuk Android, iOS dan Web.
Situs web EtherCreative/react-native-shadow-generator tidak akan memberi Anda hasil yang sangat mirip antara kedua platform, untuk alasan yang saya jelaskan di sini. Ini juga tidak dapat disesuaikan dengan perpustakaan ini.
Kompatibel dengan Android, iOS dan Web. Dan Expo!
Mendukung RTL.
Berikan perpustakaan ini dengan cepat!
Versi
react-native-svgterbaru direkomendasikan, termasuk jika menggunakan Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| Milik | Keterangan | Jenis | Bawaan |
|---|---|---|---|
| StartColor | Warna gradien awal bayangan. | string | '#00000020' |
| endcolor | Warna gradien terakhir dari bayangan. | string | StartColor transparan. Penjelasan. |
| jarak | Seberapa jauh bayangannya. | number | 10 |
| mengimbangi | Menggerakkan bayangan. Negatif x bergerak ke kiri/mulai, negatif y bergerak ke atas.Menerima nilai 'x%' .Mendefinisikan ini akan default paintInside ke True , karena ini adalah perilaku yang diinginkan biasa. | [x: string | number, y: string | number] | [0, 0] |
| Paintinside | Terapkan bayangan di bawah/di dalam konten. startColor digunakan sebagai warna pengisian, tanpa gradien.Berguna saat menggunakan offset atau jika anak Anda memiliki transparansi. | boolean | false , tetapi true jika offset didefinisikan |
| sisi | Sisi yang akan ditarik bayang -bayang mereka. Tidak termasuk sudut. Sisi -sisi yang tidak ditentukan mundur ke True . Penjelasan. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| sudut | Sudut -sudut yang akan ditarik bayang -bayang mereka. Fallback Corners yang Tidak Ditentukan ke Benar . Penjelasan. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| gaya | Gaya tampilan yang membungkus anak -anak Anda. Baca catatan di bawah ini. | StyleProp<ViewStyle> | undefined |
| containerstyle | Gaya tampilan yang membungkus bayangan dan anak -anak Anda. Berguna untuk margin. | StyleProp<ViewStyle> | undefined |
| menggeliat | Jadikan anak -anak Anda mengoceh semua ruang horizontal yang tersedia. Penjelasan. | boolean | false |
| Saferender | Tidak akan menggunakan ukuran dan posisi relatif pada render pertama tetapi pada render berikut dengan ukuran onlayout yang tepat. Berguna jika berurusan dengan jari -jari lebih besar dari ukuran sisi (seperti lingkaran) untuk menghindari artefak visual pada render pertama. Jika true , bayangan tidak akan muncul pada render pertama. | boolean | false |
| dengan disabilitas | Menonaktifkan bayangan. Berguna untuk menggunakan kembali komponen yang mudah karena kadang -kadang bayangan tidak diinginkan.containerStyle dan style masih diterapkan. | boolean | false |
Jika bayangan memiliki satu anak, itu akan mendapatkan width , height dan semua properti borderRadius dari properti style anak -anak, jika didefinisikan.
Anda juga dapat mendefinisikan sifat -sifat itu dengan style bayangan. Properti yang ditentukan di sini akan memiliki prioritas daripada yang ditentukan dalam style anak.
Jika width dan height didefinisikan dalam salah satu dari itu, hanya akan ada satu render, karena ukuran otomatis pertama tidak akan terjadi, hanya render yang tepat.
Anda dapat menggunakan 'borderTopLeftRadius' atau 'borderTopStartRadius' dan variasinya untuk mendefinisikan jari -jari sudut, meskipun saya merekomendasikan yang terakhir karena ini adalah standar RTL.
Memiliki jari -jari yang lebih besar dari sisinya akan mengacaukan bayangan jika ukurannya tidak ditentukan. Anda dapat menggunakan properti safeRender untuk hanya menunjukkan bayangan pada render ke -2 dan seterusnya, ketika kami memiliki ukuran komponen yang tepat dan jari -jari terbatas.
Radii lebih besar dari tahun 2000 ( rounded-full Tailwind adalah 9999) mungkin crash Android.
Opacity diatur secara langsung di properti startColor dan endColor , di saluran Alpha. Misalnya: '#0001' adalah hitam yang hampir transparan. Anda juga dapat menggunakan '#rrggbbaa' , 'rgba()' , 'hsla()' dll. Semua pola dalam tautan ini, tetapi bukan warna int, diterima.
Gunakan Properti stretch atau style={{alignSelf: 'stretch'}} di komponen bayangan Anda. Penjelasan!
Ini mengekspor jenis ShadowProps , alat peraga komponen bayangan. Anda dapat melakukan hal berikut:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset dan size melempar kesalahan TypeScript!Tingkatkan naskah Anda ke setidaknya 4.0.0! Kedua properti itu menggunakan tupel berlabel . Jika Anda tidak menggunakan naskah, ini tidak akan terjadi.
