React Native シャドウ生成
クロスプラットフォームの React Native シャドウを視覚的に調整し、iOS と Android 両方の StyleSheet スニペットをコピーします。
ローカル React Native スタイルジェネレーター
プラットフォーム対応のシャドウを作成
値を調整して生成された StyleSheet スニペットをコピーします。すべてこのブラウザーで実行されます。
サーフェス
ブラウザーのプレビュー（近似）
使い方
使い方
- シャドウの色、不透明度、オフセット、ぼかし半径、Android の elevation を設定します。
- カードのライブプレビューを確認し、スタイルを適用する面に合わせて値を調整します。
- 生成された StyleSheet オブジェクトをコピーし、React Native アプリの View に適用します。
2 つのプラットフォームに 1 つのスタイル
React Native は iOS で shadowColor、shadowOffset、shadowOpacity、shadowRadius を使用します。Android では主に elevation を使い、新しい React Native バージョンでは一部の shadow プロパティも対応します。生成オブジェクトには両方が含まれ、共通スタイルの出発点になります。
見た目を調整
不透明度は影の濃さ、オフセットは位置、半径は境界のぼかしを制御します。elevation は Android 固有の奥行きヒントであり、iOS 設定とピクセル単位で同じではありません。両方のプラットフォームで確認してください。
出力を開始点として利用
プレビューは選択した値をブラウザーで近似したものです。端末密度、OS バージョン、レンダラー、背景色、角丸、隣接レイヤーによって最終表示が変わります。操作面のスタイルではコントラストとタッチターゲット要件も考慮してください。
よくある質問
あわせて知りたいこと
shadow プロパティと elevation の両方が含まれるのはなぜですか？
iOS は shadow* プロパティ、Android は主に elevation を使います。両方を含めることで、1 つのスタイルオブジェクトで各プラットフォームの奥行きを表せます。
elevation は shadowRadius と完全に一致しますか？
いいえ。Android の elevation はプラットフォーム固有の奥行きヒントであり、iOS のぼかしと 1 対 1 には一致しません。対象端末でプレビューしてテストしてください。
Pressable や TouchableOpacity に使えますか？
はい。生成スタイルを表示面の View に適用し、押下状態の変化は意図的に設計して、影で明瞭さやタッチ反応が損なわれないようにしてください。