通过实时预览调节 iOS 阴影属性与 Android elevation,并复制可用 StyleSheet。
使用同步的 iOS 阴影属性和 Android 高程值生成 React Native 阴影样式,以实现一致的跨平台深度。
它输出 iOS 阴影配置(`shadowColor`、`shadowOffset`、`shadowOpacity`、`shadowRadius`)。
它在同一样式块中输出与 Android 兼容的“高程”值。
它提供了一个可视化预览卡,以在复制粘贴之前近似深度。
它组装一个复制就绪的“StyleSheet.create”片段以进行快速集成。
阴影设置
color #0f172a,offsetY 10,不透明度0.20,半径16
Android 设置
高程12
表面设置
卡片颜色#ffffff,边框半径16
iOS 代码片段
shadowColor: '#0f172a', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.20, shadowRadius: 16.0Android 代码片段
elevation: 12
完整样式块
const styles = StyleSheet.create({ card: { ...shadow props... } });只有 Android 显示阴影
记住 iOS 需要显式的阴影属性,而不只是 `elevation`。
阴影在光卡上看起来太暗
减少不透明度或半径并针对目标背景重新测试。
平台奇偶校验仍然感觉不同
手动迭代 iOS 的半径/不透明度与 Android 的高度值。
负偏移会产生尴尬的深度
使用适度的垂直偏移来实现自然的卡片高度提示。
复制的样式在项目中丢失格式
粘贴到类型化样式对象中并将数值保留为数字。
React Native 阴影生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
为什么 iOS 和 Android 阴影不同?
每个平台渲染深度不同,因此需要校准值。
一个预设可以完全匹配两个平台吗?
不完美;将此作为基线并根据平台进行微调。
输出是否包含完整的样式表代码?
是的,它会生成一个可复制的样式块。
我应该使用非常高的海拔值吗?
使用适中的数值,避免出现不真实的深度跳变。
我可以在设计令牌中重复使用这些设置吗?
是的,在针对目标屏幕验证它们之后。