bad-company

React Native shadowジェネレーター

React Nativeでもshadowプロパティないしはelevationを設定することで要素に影を落とすことが出来ます。
各種プロパティなどページ下部に詳しい説明を書いてあります。
box-shadowfilter関数の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,
}
プレビューの幅/高さ/背景色/丸み
iOS:shadowの設定

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

unstreet store
unstreet