React Nativeシャドウジェネレーター - iOS・Androidシャドウスタイル オンライン
React Native用のクロスプラットフォームシャドウスタイルをデュアルプレビューで生成。iOS shadowProps、Android elevation、boxShadow（RN 0.76+）対応 — 100%クライアントサイド。
スライダー1つでMaterial Designのエレベーションに基づいてすべてのシャドウプロパティを自動計算
計算された値
シャドウプリセット
プレビュー設定
プレビュー
iOS
Android
生成されたコード
const styles = StyleSheet.create({
shadow: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.27,
shadowRadius: 3,
elevation: 4,
},
});よくある質問
React Native Shadow Generatorとは何ですか？
React Native Shadow Generatorは、React Nativeアプリケーション向けにプラットフォーム固有のシャドウスタイルを生成するオンラインツールです。React NativeはiOS（shadowColor、shadowOffset、shadowOpacity、shadowRadius）とAndroid（elevation）で異なるシャドウAPIを使用するため、このツールは両プラットフォームに適したプロパティをビジュアルプレビュー付きで生成し、各デバイスでシャドウがどのように表示されるかを正確に確認できます。
このツールはどのように使いますか？
Quick Mode（単一の深度スライダー）またはAdvanced Mode（個別のプロパティコントロール）を選択してください。スライダーまたは数値入力でシャドウパラメータを調整します。必要に応じてデフォルトの黒以外のシャドウカラーを選択できます。iOSとAndroidのモックアップでシャドウをリアルタイムにプレビューします。希望のコード形式（StyleSheet、Inline、Platform.select、またはboxShadow）を選択し、Copyをクリックして生成されたコードをReact Nativeプロジェクトに貼り付けてください。
データは安全ですか？ブラウザの外に送信されますか？
はい。このツールはクライアントサイドJavaScriptを使用してブラウザ内で完全に実行されます。シャドウ設定、コード出力、その他のデータがサーバーに送信されることはありません。作業内容は完全にお使いのデバイス上に保持されます。
React NativeでiOSとAndroidのシャドウが異なって見えるのはなぜですか？
React Nativeはプラットフォームごとに根本的に異なるシャドウレンダリングエンジンを使用しています。iOSはCALayerに直接マッピングされるCore Animationシャドウプロパティ（shadowColor、shadowOffset、shadowOpacity、shadowRadius）を使用します。AndroidはMaterial Designのelevationプロパティを使用し、単一の数値深度値に基づいて定義済みのシャドウを作成します。そのため、プラットフォーム間でのピクセルパーフェクトなシャドウの一致は本質的に制限がありますが、このツールを使えばできる限り近づけることができます。
React Native 0.76+のboxShadowプロパティとは何ですか？
React Native 0.76から、New ArchitectureでiOSとAndroidの両方で動作するWeb仕様準拠のシャドウプロパティとしてboxShadowが導入されました。CSS box-shadowと同じ構文を使用するため、Web開発者にとって馴染みやすいものです。このツールは、New Architectureが有効なReact Native 0.76以降のプロジェクト向けにboxShadow出力を生成できます。
elevationとiOSシャドウプロパティの違いは何ですか？
elevationはAndroid専用で、Material Designのエレベーションを表す単一の数値（0-24）を受け取ります。オフセット、ブラー、不透明度を含むシャドウの外観を自動的に決定します。iOSシャドウプロパティはきめ細かい制御を提供します：shadowColorは色、shadowOffsetは方向、shadowOpacityは透明度、shadowRadiusはブラーを制御します。クロスプラットフォームのシャドウを実現するには、通常両方を設定する必要があります。
適切なシャドウの深さはどのように選べばよいですか？
Material Designのエレベーションガイドラインを参考にしてください：通常のカードやリストアイテムには0-2、浮き上がったボタン、スナックバー、FABには3-6、モーダル、ボトムシート、メニューには8-12、ナビゲーションドロワーやサイドシートには16-24。Quick Modeのプリセットを使用すると、一般的なシャドウの深さを簡単に適用できます。
コード例
// React Native shadow style generator
function generateShadowStyle(depth, color = '#000000') {
const shadowOpacity = 0.2 + (depth / 24) * 0.4;
const shadowRadius = Math.max(1, Math.round(depth * 0.8));
const shadowOffsetHeight = Math.max(1, Math.round(depth * 0.5));
return {
shadowColor: color,
shadowOffset: {
width: 0,
height: shadowOffsetHeight,
},
shadowOpacity: Math.round(shadowOpacity * 100) / 100,
shadowRadius: shadowRadius,
elevation: depth,
};
}
// Platform-specific shadow
import { Platform } from 'react-native';
function createPlatformShadow(depth, color = '#000000') {
const shadow = generateShadowStyle(depth, color);
return Platform.select({
ios: {
shadowColor: shadow.shadowColor,
shadowOffset: shadow.shadowOffset,
shadowOpacity: shadow.shadowOpacity,
shadowRadius: shadow.shadowRadius,
},
android: {
elevation: shadow.elevation,
shadowColor: shadow.shadowColor,
},
});
}
// Usage
const cardShadow = generateShadowStyle(4);
console.log(cardShadow);
// { shadowColor: '#000000', shadowOffset: { width: 0, height: 2 },
// shadowOpacity: 0.27, shadowRadius: 3, elevation: 4 }