react native fast shadow下載 - react native fast shadow源代碼下載

react native fast shadow

其他源碼

v0.1.1

下載

？反應本地福斯特陰影

快速，高質量的Android陰影，用於React Native

為什麼

React天然僅通過高程道具支持Android上的陰影，但是實現所需效果通常是不可能的，因為它只有很少的預設。已經創建了第三方庫來規避這一點，但是當在許多視圖上使用時，它們可以使您的應用程序較慢或顯著增加其內存消耗。

特徵

？‍♀️易於使用： <View>組件的置換式替換
⚡️績效：陰影可以應用於大量視圖，而沒有任何明顯的性能影響。它已被優化用於低內存消耗和快速渲染
？可自定義：支持所有常規的影子道具， shadowRadius ， shadowColor ， shadowOpacity和shadowOffset
通用：在所有平台上工作。在iOS和Web上， <ShadowedView>只是<View>的別名

入門

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

用法：

 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（）：

shadowStyle()實用程序也可以用來使創建陰影樣式和保持陰影一致的濃度平台變得更加容易。它將創建與上述相同的style道具，但在iOS上將陰影半徑除以2（由於某些原因，與設計工具或CSS的盒子遮陽相比，iOS陰影太大了2倍）：

 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 >

它如何在引擎蓋下工作

在Android上，使用以下過程生成陰影可抽籤（有關更多詳細信息，請參見Shadowfactory.java）：

視圖的形狀（帶有圓角的矩形）在畫布上塗成黑色
使用RenderScript API將高斯模糊用於使用給定的shadowRadius的畫布
然後將繪製可轉換為九型繪製可抽獎，以確保在調整視圖大小時不會扭曲陰影的角落。這樣，我們只能生成一個可以繪製的小陰影，並以相同邊界和模糊半徑的所有視圖重複使用它。
最後，可繪製的可繪製在視圖內容後面：它是帶有shadowColor / shadowOpacity ，並根據shadowOffset被取代

NinePatch -Drawable如何工作（注意調整可繪製時未將角的劃分）：

故障排除

反應本地 - 福斯特陰影具有以下局限性：

它僅適用於圓形矩形：與iOS <View>實現不同， <ShadowedView>無法與自由圖視圖一起使用。它預計其直接的後代視圖將是一個圓形的矩形（圓形）。解決方案：對於陰影<Text>元素，您可以使用TextShadowradius。對於復雜的形狀，反應本地 - 安德羅是您的最佳選擇。
<ShowshedView>期望其子女的視野能夠填補它：由您確保<ShadowedView>及其孩子的大小相同，否則陰影將大於內容（您可以將其想到<ShadowedView>作為視圖帶有背景顏色）。
轉角半徑可能是錯誤地推斷出來的：我們使用<ShadowedView>的樣式或其直接孩子的樣式來推斷拐角半徑以應用。如果您的視圖層次結構更為複雜，則可能無法正確推斷Corner Radii。解決方案：重新設計您的視圖層次結構或將borderRadius直接傳遞到<ShadowedView>的style道具。
陰影半徑限制為25或以下：此限制來自Renderscript的模糊效果。解決方案：讓我們知道這是否是您的問題。在應用模糊效果之前，可以通過縮小陰影位圖來解決這一問題。