跳到主要內容

陰影 Props

參考

在 React Native 中有 3 組陰影 API

  • boxShadow：View 樣式 prop 和 同名的網頁樣式 prop 的符合規範實作。
  • dropShadow：作為 filter View 樣式 prop 的一部分提供的特定篩選器函式。
  • 各種 shadow props (shadowColor、shadowOffset、shadowOpacity、shadowRadius)：這些直接對應到平台級 API 公開的原生對應項。

dropShadow 和 boxShadow 之間的差異如下

  • dropShadow 作為 filter 的一部分存在，而 boxShadow 是一個獨立的樣式 prop。
  • dropShadow 是一個 Alpha 遮罩，因此只有具有正 Alpha 值的像素才會「投射」陰影。boxShadow 將在元素的邊框周圍投射陰影，無論其內容為何（除非它是內嵌的）。
  • dropShadow 僅在 Android 上可用，boxShadow 在 iOS 和 Android 上都可用。
  • dropShadow 無法像 boxShadow 那樣內嵌。
  • dropShadow 沒有像 boxShadow 那樣的 spreadDistance 引數。

boxShadow 和 dropShadow 通常比 shadow props 功能更強大。然而，shadow props 對應到原生平台級 API，因此如果您只需要簡單的陰影，建議使用這些 props。請注意，只有 shadowColor 在 Android 和 iOS 上都有效，所有其他 shadow props 僅在 iOS 上有效。

Props​

boxShadow​

請參閱 View 樣式 Props 以取得文件。

dropShadow
Android
​

請參閱 View 樣式 Props 以取得文件。

shadowColor​

設定陰影顏色。

此屬性僅適用於 Android API 28 及更高版本。為了在較低版本的 Android API 上實現類似的功能，請使用 elevation 屬性。

類型
color

shadowOffset
iOS
​

設定陰影偏移。

類型
object: {width: number,height: number}

shadowOpacity
iOS
​

設定陰影不透明度（乘以顏色的 Alpha 分量）。

類型
number

shadowRadius
iOS
​

設定陰影模糊半徑。

類型
number