React Native 阴影生成器
可视化调整跨平台 React Native 阴影，然后复制同时适用于 iOS 和 Android 的 StyleSheet 片段。
本地 React Native 样式生成器
构建适配平台的阴影
调整数值并复制生成的 StyleSheet 代码片段。所有操作都在此浏览器中完成。
React Native
界面
界面
浏览器预览近似效果
使用步骤
如何使用
- 设置阴影颜色、不透明度、偏移、模糊半径和 Android elevation。
- 查看实时卡片预览，并根据目标表面调整数值。
- 复制生成的 StyleSheet 对象，并应用到 React Native 应用中的 View。
一份样式适用两个平台
React Native 在 iOS 上映射 shadowColor、shadowOffset、shadowOpacity 和 shadowRadius。Android 主要使用 elevation，较新版本的 React Native 也支持部分 shadow 属性。生成对象同时包含两组属性，可从一个共享样式开始。
调整视觉效果
Opacity 控制阴影深浅，offset 移动阴影，radius 柔化边缘。Elevation 是 Android 的深度提示，并非与 iOS 设置像素级等效，因此请在两个平台上检查效果。
将输出作为起点
预览只是所选数值在浏览器中的近似效果。设备密度、操作系统版本、渲染器、背景色、边框半径和相邻图层都会改变最终外观。设置交互表面样式时，请考虑对比度和触控目标要求。
常见问题
你可能还想知道
为什么同时包含 shadow 属性和 elevation？
iOS 使用 shadow* 属性，Android 主要依赖 elevation。两者都包含后，一份样式对象便可表达各平台预期的深度效果。
elevation 和 shadowRadius 完全相同吗？
不相同。Android elevation 是平台专属深度提示，无法与 iOS 模糊一一对应。请在支持的设备上预览和测试。
可以用于 Pressable 或 TouchableOpacity 吗？
可以。将生成样式放在可见表面的 View 上，并谨慎设计按下状态变化，避免阴影降低清晰度或触控反馈。