React Native 阴影生成器

React Native 的阴影在两个平台上实现方式完全不同：iOS 读取 shadowColor、shadowOffset、shadowOpacity 和 shadowRadius，Android 则完全忽略这几个属性，需要单独设置一个 elevation 数值。在这里可视化调整阴影效果，直接复制同时覆盖两个平台的 style 对象，外加新架构下可用的跨平台 boxShadow 字符串。

工具介绍

在 React Native 中，阴影默认不是跨平台的。iOS 使用四个独立的样式属性（shadowColor、由 width/height 组成的 shadowOffset、取值 0-1 的 shadowOpacity，以及控制模糊程度的 shadowRadius），它们最终映射到与 Web 端 box-shadow 相同的底层 CoreAnimation 阴影机制。Android 原生的 View 系统根本不支持自定义形状的阴影——它只支持 elevation，一个单一数值，会生成一个固定样式的 Material Design 投影，表示这个视图"悬浮"的高度。

这意味着一个在 iOS 上用 shadowRadius/shadowOpacity 调出来的阴影，如果没有同时设置 elevation，在 Android 上会完全不显示，而且两者的阴影形状永远不可能像素级一致，因为 elevation 生成的阴影形状不像 iOS 那样可以自定义。从启用新架构的 React Native 0.74 开始，还多了一个跨平台的 boxShadow 样式属性，语法和 CSS 完全一致。

为什么使用它？

调整偏移、模糊、不透明度和颜色时可以实时看到预览效果，不用靠猜测数值再重新构建应用去验证。
一次性拿到 iOS 阴影属性、Android elevation，以及新的跨平台 boxShadow 字符串，不用分别查三套不同的 API。
elevation 是一个独立的控件（并非从 blur/opacity 自动换算得出），因为 Android 的 elevation 到阴影外观的映射并不是从 iOS 阴影属性直接翻译过来的——你需要自己调到视觉上匹配，这个工具让你可以并排对比来完成这一步。
免费、即时生成，复制出来就是一个完整的 style 对象。

使用方法

调整偏移 X/Y、模糊半径、不透明度和阴影颜色——预览框会实时更新。
单独调整 Android 的 elevation 数值，直到视觉效果与你想要的阴影强度匹配。
点击"Copy"复制完整的 style 对象，包含 iOS 属性、Android elevation 和 boxShadow 字符串。
把这个对象粘贴到组件的 StyleSheet 中——与已有的视图样式合并或展开使用即可。

示例

输入

偏移 (0, 4)，模糊 8，不透明度 0.25，黑色，elevation 5

输出

shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'

shadowRadius 被设置为预览中显示的模糊值的一半，这与 CSS 的模糊半径和 iOS shadowRadius 之间的实际换算关系一致。

常见问题

为什么我的阴影在 Android 上不显示？

shadowColor/shadowOffset/shadowOpacity/shadowRadius 这几个属性只对 iOS 生效——Android 的原生渲染直接忽略它们。你还需要额外设置 elevation 属性（一个正数），Android 上才会出现阴影。

能让 Android 的阴影看起来和 iOS 完全一样吗？

无法完全一致——elevation 生成的是 Android 内置的 Material Design 阴影形状，它的颜色、偏移方向或模糊程度都不能像 iOS 阴影那样单独配置。你可以调整 elevation 数值让强度看起来相近，但用经典的 shadow/elevation API 无法实现两个平台像素级一致的效果。

boxShadow 属性是什么，能直接用它代替吗？

boxShadow 是一个更新的、真正跨平台的样式属性（React Native 0.74 加入，需要新架构支持），语法和 CSS 的 box-shadow 完全一致，在 iOS 和 Android 上表现一致。如果你项目的 React Native 版本和架构支持它，就可以只用这一个属性代替四个 iOS 属性加 elevation——在生产环境依赖它之前，先确认好你的 RN 版本和新架构状态。

为什么 shadowRadius 是我设置的模糊值的一半？

实时预览用的是 CSS 的 box-shadow，同样的数值下模糊值的扩散范围大约是 iOS shadowRadius 的两倍。生成的代码把 shadowRadius 设为你设置的模糊值的一半，这样预览中看到的阴影效果才能对应 iOS 实际渲染的结果——如果直接把模糊值原样复制过去，iOS 上的阴影会明显比预览更柔和、更大。

应用这些样式需要用 Platform.select 吗？

不需要——可以像生成的代码那样，把 iOS 的 shadow* 属性和 Android 的 elevation 直接写进同一个 style 对象：每个平台只会忽略不属于自己的属性。只有当你确实想在两个平台上做出完全不同的阴影设计时才有必要用 Platform.select，而不是为了消除警告（其实也没有警告）。

我设置了 elevation，但 Android 上还是没有阴影，为什么？

最常见的两个原因：视图没有设置 backgroundColor（Android 的 elevation 阴影是从视图的不透明背景投射出来的，透明视图不会投出任何阴影），或者某个父级设置了 overflow: 'hidden' 把阴影裁掉了。先给视图加上纯色背景，再检查祖先元素的 overflow 设置，然后再怀疑 elevation 数值本身有问题。