メインコンテンツへスキップ
Toolars
探索
バグを報告

開発 · ローカルユーティリティ

React Native シャドウジェネレーター

React Native Shadow Generator

React Native の旧 shadow プロパティと boxShadow を iOS・Android で並べて比較・調整し、StyleSheet コードをコピー。

タスクの道筋 / 入力から結果へ

対象プラットフォームを選ぶ

ローカルで実行 · アップロードなし

React Native シャドウジェネレーターの使い方、プライバシー、関連ツール

タスクの道筋 / 入力から結果へ

React Native のシャドウを生成する方法

  1. 01

    対象プラットフォームを選ぶ

    まず出力 API を選びます。従来モードはプラットフォーム別の iOS シャドウ属性または Android elevation を生成し、boxShadow モードは対応する React Native New Architecture の Android 9 以降向けに単一の外側シャドウを生成します。従来モードでは生成先を iOS、Android、両方から選びます。初期値は両方です。

  2. 02

    iOS のシャドウを整える

    「シャドウの色」を選び、「オフセット X」と「オフセット Y」を -100〜100 px、「不透明度」を 0.01 刻みで 0〜1、「半径」を 0〜100 px の範囲で設定します。範囲外の値は自動的に範囲内に丸められるので、壊れたコードを心配せず自由に入力できます。

  3. 03

    Android の Elevation を設定する

    Elevation を 0〜24 の間で調整します。Android の影はオフセットではなく elevation から生まれるので、この値が出力の Android 側を決め、iOS の数値はそれに影響しません。「両方」モードでは iOS のコントロールも有効なままなので、スニペットの両半分を並べて調整できます。

  4. 04

    ライブプレビューを確認する

    「ライブプレビュー」カードには、選択したプラットフォームの近似がブラウザの box-shadow で描画され、変更のたびに更新されます。控えめなデフォルトより強い出発点がほしければ、「サンプルを読み込む」で浮き上がったインディゴの例が入ります。

  5. 05

    生成されたコードをコピーする

    「コードをコピー」または「.ts をダウンロード」で StyleSheet のスニペットをプロジェクトに取り込みます（toolars-react-native-shadow.ts として保存されます）。「リセット」でやり直したいときにデフォルトのシャドウへ戻ります。

ツールの概要

処理
ブラウザー内で完結
入力の外部送信
なし
保存
一切保存しません
価格
無料

入力はブラウザに留まります。

React Native シャドウジェネレーター は検証済みのローカル実行パスを使用し、隠れた入力・出力履歴を作成しません。

ローカル実行

現在のブラウザタブ内で実行されます。

隠れた処理なし

使用中のツールデータが Toolars のドキュメントレコードになることはありません。

アカウント不要

プロフィールを作成せずにコアワークフローを使えます。お気に入りはログイン後にアカウントへ同期されます。

即時リセット

タブを閉じれば、作業中のデータは消えます。

React Native シャドウジェネレーター が役立つ場面

クロスプラットフォームスタイル

同じコンポーネントスタイルに必要な iOS・Android のプロパティを生成します。

デザインハンドオフ

視覚的なシャドウの決定を、コピー可能な React Native コードに変換します。

迅速な調整

ライブの近似表示を見ながら、深度・色・不透明度・半径・オフセットを調整できます。

React Native シャドウジェネレーター が実際に行うこと

デザインデータのカードは絶妙な浮き具合ですが、それを iOS のシャドウプロパティと Android の elevation の 2 回分として実装する必要があります。React Native シャドウジェネレーターなら、ライブの近似プレビューを見ながら見た目を調整し、正確な StyleSheet ブロックをそのままコピーできます。数字を推測してはアプリを再コンパイルする循環から解放されます。従来モードの「両方」は iOS のシャドウ属性と Android elevation を同じスニペットに含めます。最終的な色と見た目は各端末で確認してください。

よくある質問

どんなコードが生成されますか？
react-native から StyleSheet をインポートし、card という 1 つのルールを持つ styles オブジェクトをエクスポートする TypeScript スニペットです。iOS では shadowColor、width と height を持つ shadowOffset、shadowOpacity、shadowRadius が出力され、Android では elevation（Android 単体モードでは shadowColor も）が出力されます。「両方」では iOS のプロパティと elevation が一緒に含まれます。
デフォルト値は何ですか？
デフォルトのシャドウは「両方」向けで、色 #111827、「オフセット X」0、「オフセット Y」8 px、「不透明度」0.24、「半径」16 px、Elevation 8 です。これはワークスペースを開いたときに最初に表示される値でもあります。「リセット」はこの値に戻し、「サンプルを読み込む」はオフセットと半径が大きめの、より強いインディゴのプリセットに切り替えます。
どんな色形式が使えますか？
#111827 のような 6 桁の hex 値です。有効な hex カラーでない入力は出力を壊す代わりにデフォルトへ戻され、有効な値は生成コード内で大文字に正規化されます。
プレビューはデバイスの表示と完全一致しますか？
いいえ。プレビューカードにもその旨が記されています。ブラウザは選択したプラットフォームの近似として box-shadow を描画しており、設定の比較には十分ですが、ピクセル単位で正確な再現ではありません。iOS と「両方」モードではオフセット、半径、色、不透明度を反映し、Android モードではブラウザに elevation の概念がないため浮き上がりを模倣します。最終的な見た目は必ず実機かエミュレーターで確認してください。
受け付ける値の範囲は？
「オフセット X」「オフセット Y」は -100〜100 px、「不透明度」は 0.01 刻みで 0〜1、「半径」は 0〜100 px、Elevation は 0〜24 です。範囲外の入力は壊れたコードを出すのではなく、最も近い有効値に丸められます。
設定はアップロードされたり保存されたりしますか？
いいえ。コードはこのタブ内でローカルに生成され、シャドウの設定が保存・送信されることはなく、アカウントも不要です。
新しい boxShadow モードはいつ使いますか？
React Native の新アーキテクチャを使い、Android の対象が 9 以降の場合です。外側の影を1つ出力し、elevation は含みません。古い環境では従来のプロパティを使ってください。ぼかし半径と従来の影半径は見た目が同一とは限らないため、ネイティブアプリで確認してください。

開発者ツールを続ける

行き止まりではなく、関連タスクへ。

完全な索引に戻らずに、別のフォーカスされたワークスペースへ移動できます。

コード → 画像変換

Code to Image Converter

6 言語のコードをシンタックスハイライト付きで PNG・SVG に書き出し。ライト/ダークテーマ、行番号、タイトル、1x/2x に対応。

作成

URL スラッグジェネレーター

URL Slug Generator

タイトルを入力しながらクリーンな URL スラッグへ変換。アクセントは除去、& は展開、非ラテン文字は保持、区切りは選択。

作成

Base64 エンコード / デコード

Base64 Encoder/Decoder

Unicode テキストのエンコードや Base64 のデコードをローカルで行います。URL セーフ値にも対応。

変換

HTML エンコード / デコード

HTML Encoder/Decoder

マークアップを壊す 5 文字をエスケープ、または名前付き・数値の HTML エンティティをテキストに復元。1 クリックで往復確認。

変換