跳到主要内容
Toolars
探索
报告问题

开发 · 本地工具

React Native 阴影生成器

React Native Shadow Generator

为 iOS 与 Android 生成 React Native 阴影样式：调偏移、不透明度、半径与 elevation，对照实时近似预览，复制 StyleSheet 代码；可选新架构 boxShadow 模式。

任务路径 / 从输入到结果

选择目标平台

本地运行 · 不做任何上传

了解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

把 JavaScript、TypeScript、HTML、CSS、JSON、Bash 代码用 Shiki 高亮后排成带窗口标题与行号的卡片，可调背景、内边距、字号与 1x/2x 比例，导出 SVG 或 PNG。

创建

URL Slug 生成器

URL Slug Generator

把标题实时转成干净的 URL slug：去重音、& 变 and、标点折叠为连字符或下划线，中日文等非拉丁文字保留，结果小写，可复制或下载。

创建

Base64 编码 / 解码

Base64 Encoder/Decoder

在本地编码 Unicode 文本或解码 Base64，支持 UTF-8、URL-safe 变体与换行保留，解码即时校验并指出具体错误，一键互换方向做往返验证。

转换

HTML 编码 / 解码

HTML Encoder/Decoder

编码时恰好转义 &、<、> 与两种引号共五个字符，解码经浏览器解析器还原命名、十进制与十六进制实体；一键互换即可验证往返，全程本地。

转换