React Native shadowジェネレーター
React Nativeでもshadowプロパティないしはelevationを設定することで要素に影を落とすことが出来ます。
各種プロパティなどページ下部に詳しい説明を書いてあります。
box-shadowやfilter関数のdrop-shadowのジェネレーターは別ページになります。
Android: elevation
iOS: shadow
{
/* preview */
width: 150,
height: 60,
borderRadius: 30,
backgroundColor: "#fff",
/* shadow */
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 1,
}React Native shadowプロパティについて
iOS:shadow
shadowColor: 色
shadowOffset: {width: 左右の位置, height:上下の位置}
shadowOpacity: 影の透明度
shadowRadius: ぼかしiOSではwebのbox-shadowと同様に設定をすることができます。
ただし広がり(spread)はプロパティとして存在せず、その代わり透明度(opacity)を設定することができます。
opacityについてはshadowColorのアルファ値を設定していると乗算になります。
例えばcolorをrgba(0,0,0,0.6)でopacityを0.6に設定すると、イメージとしてはrgba(0,0,0,0.36)のshadowが設定されてるような形です。
Android:elevation
elevation: 数値Androidの場合、shadowプロパティを使用することはできませんが、その代わりdepthを表すelevationを使います。
これはAndroidのレイアウト系xmlで設定するのと同じです。
まとめ
# iOSでの設定
shadowColor: 色
shadowOffset: {width: 左右の位置, height:上下の位置}
shadowOpacity: 影の透明度
shadowRadius: ぼかし
# Androidでの設定
elevation: 数値iOSではwebのbo-shadowと同様に設定をすることができ、Androidではelevationで決まった数値が設定されます。
AD
