react native shadow 2
v7.1.1
重要的
2024年10月23日發布的新React Native 0.76最終支持了跨平台的陰影！
此新功能應比此庫更優選。
在過去的近4年中，我只能全心全意地欣賞每個人的支持和友善，並慶祝每周達到39k，總下載量為2m ？
如果您正在尋找具有5年專業知識，反應和反應的熱情專業人士，請通過[email protected]與我聯繫！
反應原狀陰影已經死了多年。這是一個改進的版本，具有更多功能，打字稿支持和從頭開始寫的。不需要定義其尺寸：陰影巧妙地應用於第一個渲染，然後精確地重新塗在以下渲染上。
它解決了Android，iOS和Web沒有相同的陰影外觀和用法的舊反應本機問題。
出於我在此處描述的原因，渦輪創建/反應形式隱形生成網站不會為您提供兩個平台之間的非常相似的結果。它也不像這個庫那樣可定制。
與Android，iOS和Web兼容。和博覽會！
支持RTL。
快速嘗試一下這個圖書館！
建議使用最新的
react-native-svg版本，包括使用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 > 
| 財產 | 描述 | 類型 | 預設 |
|---|---|---|---|
| StartColor | 陰影的最初梯度顏色。 | string | '#00000020' |
| 端彩 | 陰影的最終梯度顏色。 | string | 透明的啟動顏色。解釋。 |
| 距離 | 陰影走了多遠。 | number | 10 |
| 抵消 | 移動陰影。負x向左/啟動移動，負y將其移動。接受 'x%'值。將其定義為true paintInside為true ，因為這是通常的所需行為。 | [x: string | number, y: string | number] | [0, 0] |
| paintinside | 在內容內部/內部應用陰影。 startColor用作填充顏色，而無需梯度。使用 offset或您的孩子具有透明度時有用。 | boolean | false ，但如果定義了offset true |
| 邊 | 將繪製其陰影的側面。不包括角落。不確定的一面後備為真。解釋。 | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| 角落 | 將繪製其陰影的角落。未定義的角落的後備為真。解釋。 | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| 風格 | 包裹孩子的風格。閱讀下面的註釋。 | StyleProp<ViewStyle> | undefined |
| 集裝箱 | 包裹著陰影和您的孩子的視圖風格。對於邊緣有用。 | StyleProp<ViewStyle> | undefined |
| 拉緊 | 使您的孩子伴有所有可用的水平空間。解釋。 | boolean | false |
| 更安全 | 不會在第一渲染上使用相對的尺寸和定位，而是在以下渲染器上使用確切的on layout尺寸。如果處理大於側面尺寸（如圓）以避免在第一渲染上的視覺偽像的側面大小（例如圓），則有用。 如果 true ，則陰影將不會出現在第一渲染上。 | boolean | false |
| 禁用 | 禁用陰影。由於有時不需要陰影，可用於易於重複使用組件。 仍然應用 containerStyle和style 。 | boolean | false |
如果陰影有一個孩子，它將獲得兒童style屬性（如果定義）的width ， height和所有borderRadius屬性。
您還可以在影子的style中定義這些屬性。這裡定義的屬性將優先於孩子的style中定義的屬性。
如果在其中任何一個中定義了width和height ，則只會有一個渲染，因為第一個自動尺寸不會發生，只有精確的渲染。
您可以使用'borderTopLeftRadius'或'borderTopStartRadius'及其變化來定義角落半徑，儘管我建議後者是RTL標準。
如果沒有定義大小，則半徑大於其側面將弄亂陰影。當我們具有確切的組件大小並且半徑受到適當限制時，您可以使用safeRender屬性僅在第二渲染及以後顯示陰影。
大於2000年的半徑（Tailwind的rounded-full是9999）可能會崩潰的Android。
不透明度直接在Alpha通道中的startColor和endColor屬性中設置。例如： '#0001'是幾乎透明的黑色。您也可以使用'#rrggbbaa' ， 'rgba()' ， 'hsla()'等。此鏈接中的所有模式（但不是int顏色）都被接受。
使用stretch屬性或style={{alignSelf: 'stretch'}}在您的影子組件中。解釋！
它導出了ShadowProps類型，即陰影組件的道具。您可能會執行以下操作：
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset和size屬性正在拋出打字稿錯誤！將您的打字稿升級到至少4.0.0！這兩個屬性使用標記的元組。如果您不使用打字稿，則不會發生這種情況。
