React Native阴影生成器 - iOS和Android阴影样式 在线工具
为React Native生成跨平台阴影样式，实时双平台预览。支持iOS shadowProps、Android elevation和boxShadow（RN 0.76+）— 100%客户端处理。
通过单个滑块基于Material Design高程自动计算所有阴影属性
计算值
阴影预设
预览设置
预览
iOS
Android
生成的代码
const styles = StyleSheet.create({
shadow: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.27,
shadowRadius: 3,
elevation: 4,
},
});常见问题
什么是React Native阴影生成器？
React Native阴影生成器是一个在线工具，用于为React Native应用创建特定平台的阴影样式。由于React Native在iOS（shadowColor、shadowOffset、shadowOpacity、shadowRadius）和Android（elevation）上使用不同的阴影API，此工具可以为两个平台生成正确的属性，并提供视觉预览，让您准确看到每个设备上阴影的效果。
如何使用此工具？
在快速模式（单一深度滑块）或高级模式（单独属性控制）之间选择。使用滑块或数字输入调整阴影参数。可选择除默认黑色以外的阴影颜色。在iOS和Android模拟预览中实时查看阴影效果。选择您偏好的代码格式（StyleSheet、内联、Platform.select或boxShadow），点击复制将生成的代码粘贴到React Native项目中。
我的数据安全吗？会离开我的浏览器吗？
是的。此工具完全在您的浏览器中使用客户端JavaScript运行。没有任何阴影配置、代码输出或数据会发送到任何服务器。您的工作完全保留在您的设备上。
为什么React Native中iOS和Android的阴影看起来不同？
React Native在每个平台上使用根本不同的阴影渲染引擎。iOS使用Core Animation阴影属性，直接映射到CALayer。Android使用Material Design的elevation属性，根据单个数值深度创建预定义的阴影。这意味着跨平台的像素级完美阴影匹配本质上是有限的，但此工具可帮助您尽可能接近。
React Native 0.76+中的boxShadow属性是什么？
从React Native 0.76开始，New Architecture引入了boxShadow作为符合Web规范的阴影属性，可在iOS和Android上使用。它使用与CSS box-shadow相同的语法，对Web开发者来说很熟悉。此工具可以为使用React Native 0.76或更高版本并启用New Architecture的项目生成boxShadow输出。
elevation和iOS阴影属性有什么区别？
elevation仅限Android使用，接受单个数字（0-24），代表Material Design高程。它自动确定阴影外观，包括偏移、模糊和不透明度。iOS阴影属性提供精细控制：shadowColor设置颜色，shadowOffset控制方向，shadowOpacity控制透明度，shadowRadius控制模糊。通常需要同时设置两者来实现跨平台阴影。
如何选择合适的阴影深度？
参考Material Design高程指南：0-2用于静态卡片和列表项，3-6用于浮动按钮、Snackbar和FAB，8-12用于模态框、底部表单和菜单，16-24用于导航抽屉和侧边栏。使用快速模式中的预设来获取常见阴影深度。
代码示例
// React Native shadow style generator
function generateShadowStyle(depth, color = '#000000') {
const shadowOpacity = 0.2 + (depth / 24) * 0.4;
const shadowRadius = Math.max(1, Math.round(depth * 0.8));
const shadowOffsetHeight = Math.max(1, Math.round(depth * 0.5));
return {
shadowColor: color,
shadowOffset: {
width: 0,
height: shadowOffsetHeight,
},
shadowOpacity: Math.round(shadowOpacity * 100) / 100,
shadowRadius: shadowRadius,
elevation: depth,
};
}
// Platform-specific shadow
import { Platform } from 'react-native';
function createPlatformShadow(depth, color = '#000000') {
const shadow = generateShadowStyle(depth, color);
return Platform.select({
ios: {
shadowColor: shadow.shadowColor,
shadowOffset: shadow.shadowOffset,
shadowOpacity: shadow.shadowOpacity,
shadowRadius: shadow.shadowRadius,
},
android: {
elevation: shadow.elevation,
shadowColor: shadow.shadowColor,
},
});
}
// Usage
const cardShadow = generateShadowStyle(4);
console.log(cardShadow);
// { shadowColor: '#000000', shadowOffset: { width: 0, height: 2 },
// shadowOpacity: 0.27, shadowRadius: 3, elevation: 4 }