跳到主要內容
Toolars
探索
回報問題

開發 · 本機工具

React Native 陰影產生器

React Native Shadow Generator

對照即時預覽調整 iOS 陰影與 Android elevation，支援新架構 boxShadow 模式，複製可用的 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 到 1）和「半徑」（0 到 100 px）。超出範圍的數值會被自動收攏到邊界。

  3. 03

    設定 Android 的 Elevation

    把 Elevation 在 0 到 24 之間調整。Android 的陰影來自 elevation 而不是偏移量，因此這個值驅動輸出中的 Android 部分。

  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。React Native 陰影產生器 讓你對照即時近似效果調好觀感，複製精確的 StyleSheet 程式碼區塊，而不是每猜一次就手調數字重新編譯應用。傳統「兩者」模式將 iOS 陰影屬性與 Android elevation 放在同一片段；最終顏色與外觀仍須分別在裝置上核對。

常見問題

產生器會產出什麼程式碼？
一段 TypeScript 的 StyleSheet.create 程式碼區塊。選 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。任何不是合法十六進位顏色的輸入會退回到預設值而不是弄壞輸出，合法值在產生的程式碼裡會被正規化為大寫。
預覽和裝置上的效果完全一致嗎？
不一致，預覽卡片上也寫明了這一點：瀏覽器用 box-shadow 渲染所選平台的近似效果，足夠用來比較參數，但不是像素級一致。最終效果請在實機或模擬器上確認。
接受哪些數值範圍？
「偏移 X」和「偏移 Y」為 -100 到 100 px，「不透明度」以 0.01 為步進從 0 到 1，「半徑」為 0 到 100 px，Elevation 為 0 到 24。超出範圍的輸入會被收攏到最近的有效值，而不會產出壞程式碼。
我的設定會被上傳或儲存嗎？
不會。程式碼在目前分頁本機產生，陰影設定不會被儲存或傳送到任何地方，也無需帳號。
何時選擇新的 boxShadow 模式？
應用程式使用 React Native 新架構，且 Android 目標為 9 或更新版本時可選擇。此模式輸出單個外陰影，不含 elevation；舊環境保留傳統平台屬性。模糊半徑與傳統陰影半徑並非像素一致的遷移，請在原生應用程式中核對。

繼續探索開發者工具

相關任務，而非死胡同。

無需返回完整索引，直接進入另一個專注的工作區。

程式碼轉圖片

Code to Image Converter

把六種語言的程式碼渲染為帶行號與視窗標題的圖片，淺色深色兩種主題，可嵌入自備字型，匯出 SVG 或 1x、2x PNG。

建立

URL Slug 產生器

URL Slug Generator

把標題即時轉為小寫 slug：去除重音、& 變 and、標點折疊為連字號或底線，保留中日文字元，全程本機。

建立

Base64 編碼 / 解碼

Base64 Encoder/Decoder

在本機雙向轉換 Base64，支援 UTF-8、URL-safe 與保留換行選項，解碼即時驗證，互換按鈕一鍵往返檢查。

轉換

HTML 編碼 / 解碼

HTML Encoder/Decoder

把 &、<、> 與引號五個字元轉義為 HTML 實體，或用瀏覽器解析器還原命名與數字參照，互換按鈕快速往返驗證。

轉換