シャドウプロップス
- TypeScript
- JavaScript
リファレンス
React Native には 3 つのシャドウ API セットがあります
boxShadow: View のスタイルプロップで、同名のウェブスタイルプロップの仕様に準拠した実装です。dropShadow:filterView スタイルプロップの一部として利用可能な特定のフィルター関数です。- さまざまな
shadowプロップ（shadowColor、shadowOffset、shadowOpacity、shadowRadius）：これらは、プラットフォームレベルの API によって公開されているそれぞれのネイティブな対応物に直接マッピングされます。
dropShadow と boxShadow の違いは以下の通りです
dropShadowはfilterの一部として存在しますが、boxShadowは独立したスタイルプロップです。dropShadowはアルファマスクなので、正のアルファ値を持つピクセルのみが影を「落とします」。boxShadowは、その内容に関係なく要素のボーダーボックスの周りに影を落とします（インセットでない限り）。dropShadowは Android でのみ利用可能で、boxShadowは iOS と Android の両方で利用可能です。dropShadowはboxShadowのようにインセットにすることはできません。dropShadowにはboxShadowのようなspreadDistance引数はありません。
boxShadow と dropShadow はどちらも一般的に shadow プロップよりも多機能です。ただし、shadow プロップはネイティブのプラットフォームレベル API にマッピングされるため、単純な影が必要な場合はこれらのプロップが推奨されます。なお、shadowColor のみが Android と iOS の両方で機能し、その他の shadow プロップはすべて iOS でのみ機能します。
Props
boxShadow
詳細についてはView Style Propsを参照してください。
dropShadow Android
詳細についてはView Style Propsを参照してください。
shadowColor
ドロップシャドウの色を設定します。
このプロパティは Android API 28 以降でのみ機能します。それ以前の Android API で同様の機能を利用するには、elevation プロパティを使用してください。
| 型 |
|---|
| 色 |
shadowOffset iOS
ドロップシャドウのオフセットを設定します。
| 型 |
|---|
オブジェクト: {width: number,height: number} |
shadowOpacity iOS
ドロップシャドウの不透明度を設定します（色のアルファ成分によって乗算されます）。
| 型 |
|---|
| 数値 |
shadowRadius iOS
ドロップシャドウのぼかし半径を設定します。
| 型 |
|---|
| 数値 |