Conversation
📝 WalkthroughWalkthrough新增完整的 Skeleton（骨架屏）组件系统，包括主组件及子组件 Title、Paragraph，类型定义、样式与主题变量、文档、示例与测试，并将组件与类型导出到库的公共 API。 Changes
Sequence DiagramsequenceDiagram
participant Consumer as 消费者代码
participant Skeleton as Skeleton 组件
participant Theme as useTheme()
participant Style as SkeletonStyle
participant Animated as Animated API
Consumer->>Skeleton: render(props)
Skeleton->>Theme: 请求主题
Theme-->>Skeleton: 返回 Theme 对象
Skeleton->>Style: 合并主题样式与自定义 styles
Style-->>Skeleton: 返回样式对象
alt props.animated === true
Skeleton->>Animated: 创建/配置 Animated.Value 与 timing 循环
Animated->>Animated: 执行动画循环（opacity 0→1→0.25→1）
Animated-->>Skeleton: 提供 Animated.View
Skeleton->>Consumer: 渲染 Animated.View 骨架行/块
else props.animated === false
Skeleton->>Consumer: 渲染静态 View 骨架行/块
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @lqr131115, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new Skeleton component, including Skeleton.Title and Skeleton.Paragraph, to be used as a loading placeholder. The implementation includes an animated state and allows for customization. The changes are well-structured, with new components, styles, types, documentation, and tests. I've found a couple of areas for improvement: one is a potential bug where extra props are not passed down correctly in the Skeleton component, and the other is a minor code simplification in the Skeleton.Paragraph component. Overall, this is a great addition.
|
@1uokun cc 👨💻 2026-01-30.16.55.43.mov |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@components/skeleton/Skeleton.tsx`:
- Around line 50-54: InternalSkeleton is spreading restProps into
AnimatedSkeleton which only expects style and animated, causing unknown props to
be forwarded and RN prop-type warnings; either stop forwarding restProps from
InternalSkeleton (only pass style and animated) or expand AnimatedSkeleton's
props to extend React Native ViewProps (update AnimatedSkeleton prop types to
include ViewProps and ensure it forwards allowed view props). Locate the spread
usage in InternalSkeleton (restProps -> AnimatedSkeleton) and fix by removing
the spread or by updating the AnimatedSkeleton/AnimatedSkeletonProps type and
internal forwarding logic to accept and pass through ViewProps safely.
In `@components/skeleton/SkeletonTitle.tsx`:
- Around line 7-23: The code currently merges customStyles twice (once here in
InternalSkeletonTitle via useTheme and again inside InternalSkeleton), so stop
forwarding the raw styles down: remove the styles={customStyles} prop from the
InternalSkeleton call in InternalSkeletonTitle (and do the same in
SkeletonParagraph) so the component only uses the already-merged
themeStyles.skeletonTitle for styling; keep useTheme(SkeletonStyles, styles:
customStyles) in InternalSkeletonTitle and let InternalSkeleton consume just the
merged style props, avoiding the double-merge.
🧹 Nitpick comments (4)
components/skeleton/index.en-US.md (1)
9-12: 考虑调整标题层级以符合 Markdown 最佳实践。静态分析工具提示第 10 行的
### Rule标题应该使用##而非###，因为在此之前没有出现过##级别的标题。不过如果这是项目文档的统一风格，可以忽略此建议。📝 可选的修复方案
-### Rule +## Rulescomponents/skeleton/index.tsx (1)
5-6: 冗余的类型断言
as typeof InternalSkeletonTitle和as typeof InternalSkeletonParagraph是多余的，因为变量已经具有正确的类型。可以简化为直接赋值。♻️ 建议的简化
-const Title = InternalSkeletonTitle as typeof InternalSkeletonTitle -const Paragraph = InternalSkeletonParagraph as typeof InternalSkeletonParagraph +const Title = InternalSkeletonTitle +const Paragraph = InternalSkeletonParagraphcomponents/skeleton/demo/basic.tsx (1)
5-35: 建议使用函数式组件Demo 使用了 class 组件，但项目中的 Skeleton 组件本身使用的是函数式组件和 Hooks。为保持代码风格一致性，建议将 demo 改为函数式组件。
♻️ 建议的重构
-class SkeletonExample extends React.Component { - render() { - return ( +const SkeletonExample: React.FC = () => { + return ( <View style={{ padding: 16, backgroundColor: '#fff' }}> {/* ... 内容保持不变 ... */} </View> - ) - } + ) }components/skeleton/SkeletonParagraph.tsx (1)
22-22:typeof检查可简化由于 TypeScript 类型已确保
lineCount为number | undefined，且第 11 行已设置默认值4，因此typeof lineCount === 'number'的检查是冗余的。可以简化为直接使用Math.max。♻️ 建议的简化
- const _lineCount = typeof lineCount === 'number' ? Math.max(lineCount, 1) : 4 + const _lineCount = Math.max(lineCount, 1)
|
建议新增 |
3 participants
First of all, thank you for your contribution! :-)
Please makes sure that these checkboxes are checked before submitting your PR, thank you!
npm run lintand fix those errors before submitting in order to keep consistent code style.Extra checklist:
if isBugFix :
elif isNewFeature :
Summary by CodeRabbit