React Native Skeleton Placeholder API参考手册：完整配置参数详解 React Native Skeleton Placeholder API参考手册完整配置参数详解【免费下载链接】react-native-skeleton-placeholderSkeletonPlaceholder is a React Native library to easily create an amazing loading effect.项目地址: https://gitcode.com/gh_mirrors/re/react-native-skeleton-placeholder想要为你的React Native应用添加优雅的骨架屏加载效果吗React Native Skeleton Placeholder正是你需要的解决方案这个强大的库让创建流畅的加载动画变得异常简单。在本篇完整的API参考手册中我将详细介绍所有配置参数和最佳实践帮助你快速上手并充分利用这个库的功能。 核心组件与基础用法React Native Skeleton Placeholder提供了两种主要的使用方式通过SkeletonPlaceholder.Item组件或直接使用标准的React Native组件View、Text、Image。无论哪种方式你都能轻松创建出专业的骨架屏效果。快速开始示例import React from react; import SkeletonPlaceholder from react-native-skeleton-placeholder; const SimpleSkeleton () { return ( SkeletonPlaceholder SkeletonPlaceholder.Item flexDirectionrow alignItemscenter SkeletonPlaceholder.Item width{60} height{60} borderRadius{50} / SkeletonPlaceholder.Item marginLeft{20} SkeletonPlaceholder.Item width{120} height{20} / SkeletonPlaceholder.Item marginTop{6} width{80} height{20} / /SkeletonPlaceholder.Item /SkeletonPlaceholder.Item /SkeletonPlaceholder ); }; SkeletonPlaceholder 主组件参数详解backgroundColor - 骨架屏基础颜色类型:string默认值:#E1E9EE说明: 设置骨架屏的背景颜色。这个颜色定义了骨架屏静态部分的色调。SkeletonPlaceholder backgroundColor#F5F5F5 {/* 内容 */} /SkeletonPlaceholderhighlightColor - 高亮动画颜色类型:string(支持hex、rgb、rgba格式)默认值:#F2F8FC说明: 设置高亮动画的颜色。这个颜色会在骨架屏上产生流动的光泽效果。SkeletonPlaceholder highlightColor#FFFFFF {/* 内容 */} /SkeletonPlaceholderspeed - 动画速度控制类型:number默认值:800(毫秒)特殊值:0(禁用动画)说明: 控制高亮动画的移动速度。数值越小动画越快设置为0时完全禁用动画。// 快速动画 SkeletonPlaceholder speed{500} {/* 内容 */} /SkeletonPlaceholder // 慢速动画 SkeletonPlaceholder speed{1500} {/* 内容 */} /SkeletonPlaceholder // 禁用动画 SkeletonPlaceholder speed{0} {/* 内容 */} /SkeletonPlaceholderdirection - 动画方向类型:right | left默认值:right说明: 控制高亮动画的移动方向。right表示从左到右left表示从右到左。// 从左到右的动画 SkeletonPlaceholder directionright {/* 内容 */} /SkeletonPlaceholder // 从右到左的动画 SkeletonPlaceholder directionleft {/* 内容 */} /SkeletonPlaceholderenabled - 启用/禁用骨架屏类型:boolean默认值:true说明: 控制是否显示骨架屏效果。当设置为false时组件会直接显示其子元素内容。const MyComponent ({ isLoading }) { return ( SkeletonPlaceholder enabled{isLoading} {/* 实际内容 */} View style{styles.content} Text加载完成的内容/Text /View /SkeletonPlaceholder ); };borderRadius - 默认圆角半径类型:number默认值:undefined说明: 为所有骨架屏元素设置统一的圆角半径。这个值会被单个元素的borderRadius属性覆盖。// 统一设置所有元素的圆角 SkeletonPlaceholder borderRadius{8} SkeletonPlaceholder.Item width{100} height{100} / SkeletonPlaceholder.Item width{200} height{20} marginTop{12} / /SkeletonPlaceholdershimmerWidth - 高亮区域宽度类型:number默认值:undefined说明: 控制高亮动画区域的宽度。这个参数允许你自定义高亮条的宽度实现不同的视觉效果。// 自定义高亮区域宽度 SkeletonPlaceholder shimmerWidth{200} {/* 内容 */} /SkeletonPlaceholder SkeletonPlaceholder.Item 子组件参数SkeletonPlaceholder.Item组件继承自React Native的View组件因此支持所有标准的View样式属性。这为你提供了极大的灵活性来创建各种形状和布局的骨架屏元素。支持的样式属性属性类别示例属性说明尺寸相关width,height,minWidth,maxWidth控制骨架屏元素的大小边距相关margin,marginTop,marginLeft,padding控制元素之间的间距布局相关flex,flexDirection,alignItems,justifyContent控制元素的布局方式定位相关position,top,left,right,bottom控制元素的定位边框相关borderRadius,borderWidth,borderColor控制元素的边框样式实用示例集合1. 用户资料卡片骨架屏const UserProfileSkeleton () ( SkeletonPlaceholder borderRadius{4} SkeletonPlaceholder.Item flexDirectionrow alignItemscenter SkeletonPlaceholder.Item width{60} height{60} borderRadius{50} / SkeletonPlaceholder.Item marginLeft{20} SkeletonPlaceholder.Item width{120} height{20} / SkeletonPlaceholder.Item marginTop{6} width{80} height{20} / /SkeletonPlaceholder.Item /SkeletonPlaceholder.Item /SkeletonPlaceholder );2. 列表项骨架屏const ListItemSkeleton () ( SkeletonPlaceholder borderRadius{4} SkeletonPlaceholder.Item flexDirectionrow SkeletonPlaceholder.Item width{100} height{100} / SkeletonPlaceholder.Item flex{1} justifyContentspace-between marginLeft{12} SkeletonPlaceholder.Item width50% height{20} / SkeletonPlaceholder.Item width30% height{20} / SkeletonPlaceholder.Item width80% height{20} / /SkeletonPlaceholder.Item /SkeletonPlaceholder.Item /SkeletonPlaceholder );3. 卡片布局骨架屏const CardSkeleton () ( SkeletonPlaceholder borderRadius{8} SkeletonPlaceholder.Item width100% height{200} / SkeletonPlaceholder.Item padding{16} SkeletonPlaceholder.Item width60% height{24} / SkeletonPlaceholder.Item marginTop{8} width90% height{16} / SkeletonPlaceholder.Item marginTop{8} width90% height{16} / SkeletonPlaceholder.Item marginTop{8} width70% height{16} / /SkeletonPlaceholder.Item /SkeletonPlaceholder ); 高级配置技巧动态启用/禁用骨架屏在实际应用中你通常需要根据数据加载状态来切换骨架屏const DataComponent () { const [loading, setLoading] useState(true); const [data, setData] useState(null); useEffect(() { fetchData().then(result { setData(result); setLoading(false); }); }, []); return ( SkeletonPlaceholder enabled{loading} {loading ? ( // 骨架屏结构 View SkeletonPlaceholder.Item width{100} height{100} / SkeletonPlaceholder.Item width{200} height{20} marginTop{12} / /View ) : ( // 实际数据内容 View Image source{{ uri: data.imageUrl }} style{styles.image} / Text style{styles.title}{data.title}/Text /View )} /SkeletonPlaceholder ); };自定义颜色方案为不同的应用主题创建匹配的骨架屏颜色const LightThemeSkeleton () ( SkeletonPlaceholder backgroundColor#F0F0F0 highlightColor#FFFFFF speed{1000} {/* 内容 */} /SkeletonPlaceholder ); const DarkThemeSkeleton () ( SkeletonPlaceholder backgroundColor#2D2D2D highlightColor#404040 speed{800} {/* 内容 */} /SkeletonPlaceholder );性能优化建议避免过度使用动画在列表等大量元素场景中考虑使用speed{0}禁用动画合理设置enabled属性数据加载完成后及时关闭骨架屏复用骨架屏组件创建可复用的骨架屏组件减少重复代码 实际应用场景社交媒体应用const SocialMediaFeedSkeleton () ( View {[1, 2, 3].map((_, index) ( View key{index} style{{ marginBottom: 16 }} SkeletonPlaceholder borderRadius{4} {/* 用户信息 */} SkeletonPlaceholder.Item flexDirectionrow alignItemscenter SkeletonPlaceholder.Item width{40} height{40} borderRadius{20} / SkeletonPlaceholder.Item marginLeft{12} SkeletonPlaceholder.Item width{100} height{16} / SkeletonPlaceholder.Item width{60} height{12} marginTop{4} / /SkeletonPlaceholder.Item /SkeletonPlaceholder.Item {/* 内容区域 */} SkeletonPlaceholder.Item marginTop{12} width100% height{200} / {/* 操作按钮 */} SkeletonPlaceholder.Item flexDirectionrow marginTop{12} SkeletonPlaceholder.Item width{60} height{24} marginRight{12} / SkeletonPlaceholder.Item width{60} height{24} marginRight{12} / SkeletonPlaceholder.Item width{60} height{24} / /SkeletonPlaceholder.Item /SkeletonPlaceholder /View ))} /View );电商产品列表const ProductGridSkeleton () ( View style{{ flexDirection: row, flexWrap: wrap }} {[1, 2, 3, 4, 5, 6].map((_, index) ( View key{index} style{{ width: 50%, padding: 8 }} SkeletonPlaceholder borderRadius{8} SkeletonPlaceholder.Item width100% height{150} / SkeletonPlaceholder.Item padding{8} SkeletonPlaceholder.Item width80% height{16} / SkeletonPlaceholder.Item width60% height{14} marginTop{4} / SkeletonPlaceholder.Item width40% height{20} marginTop{8} / /SkeletonPlaceholder.Item /SkeletonPlaceholder /View ))} /View ); 参数配置总结表参数名称类型默认值说明使用场景backgroundColorstring#E1E9EE骨架屏基础颜色适配应用主题色highlightColorstring#F2F8FC高亮动画颜色创建光泽效果speednumber800动画速度(毫秒)控制动画节奏0为禁用directionright \| leftright动画方向创建不同的视觉效果enabledbooleantrue启用/禁用骨架屏根据加载状态切换borderRadiusnumberundefined默认圆角半径统一设置圆角样式shimmerWidthnumberundefined高亮区域宽度自定义高亮条宽度 最佳实践与常见问题最佳实践保持一致性在整个应用中使用统一的骨架屏样式和动画参数模拟真实布局骨架屏的形状应尽可能接近实际内容的布局合理使用动画在列表等密集场景中考虑禁用或减慢动画及时切换数据加载完成后立即切换到实际内容常见问题解答Q: 如何自定义骨架屏的颜色以匹配我的应用主题A: 使用backgroundColor和highlightColor参数可以设置任何有效的CSS颜色值。Q: 骨架屏会影响应用性能吗A: 合理使用的情况下影响很小。避免在大型列表的每个项目中都启用动画效果。Q: 是否支持TypeScriptA: 是的库本身使用TypeScript编写提供了完整的类型定义。Q: 如何禁用骨架屏动画A: 将speed参数设置为0即可完全禁用动画效果。通过这篇完整的API参考手册你现在应该能够充分利用React Native Skeleton Placeholder的所有功能了。无论是简单的加载指示器还是复杂的骨架屏布局这个库都能帮助你创建出专业级的用户体验。开始在你的项目中尝试这些配置吧【免费下载链接】react-native-skeleton-placeholderSkeletonPlaceholder is a React Native library to easily create an amazing loading effect.项目地址: https://gitcode.com/gh_mirrors/re/react-native-skeleton-placeholder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考