react-native-design

概览

什么是 react-native-design？

react-native-design 是一套实用技能，适合希望使用 React Native 构建视觉精致、高性能移动应用的开发者。它涵盖了样式设计、导航和动画的核心模式，利用 StyleSheet、React Navigation 和 Reanimated 3 等工具。该技能非常适合前端和 UI 设计师、React Native 工程师，以及任何希望在 iOS 和 Android 上提供原生级用户体验的人。

谁适合使用此技能？

• 希望提升 UI/UX 精致度的 React Native 开发者
• 构建跨平台移动应用的团队
• 需要实现复杂导航流程或自定义动画的工程师
• 需要响应式布局和平台特定设计模式的开发者

解决的问题

• 使用 StyleSheet 和 styled-components 实现一致且易维护的样式
• 通过 React Navigation 6+ 实现类型安全且可扩展的导航
• 利用 Reanimated 3 实现流畅高效的动画
• 响应式布局和手势驱动交互
• 针对 iOS 和 Android 的平台特定 UI 调整

使用方法

安装步骤

1. 将技能添加到你的 agent 或项目中：

   npx skills add https://github.com/wshobson/agents --skill react-native-design
   

2. 首先阅读 SKILL.md，了解整体概览和最佳实践。
3. 浏览 references/ 文件夹，获取深入指南：
   • references/styling-patterns.md：高级样式技巧
   • references/navigation-patterns.md：导航设置与模式
   • references/reanimated-patterns.md：动画实现方案

关键文件和文件夹

• SKILL.md：技能主文档及使用场景
• references/：导航、动画和样式指南
• references/navigation-patterns.md：逐步导航设置及类型安全示例
• references/reanimated-patterns.md：Reanimated 3 动画实用模式
• references/styling-patterns.md：StyleSheet、主题和组件样式模式

如何适配你的项目

• 将提供的模式作为参考，根据你的代码库、设计系统和平台需求进行调整
• 逐步集成导航和动画模式，确保最佳效果
• 利用类型安全导航和主题功能，实现可维护且可扩展的应用

常见问题

什么时候应该使用 react-native-design？

在构建新的 React Native 应用、重构 UI 以提升可维护性，或添加高级导航和动画功能时使用。

react-native-design 涵盖哪些内容？

涵盖了 StyleSheet 和 styled-components 的样式设计，React Navigation 6+ 的导航，以及 Reanimated 3 的动画。还包括响应式布局、主题和手势处理的模式。

这个技能适合初学者吗？

适合。指南从基础开始，逐步深入高级主题，适合初学者和有经验的开发者。

哪里可以找到实用示例？

查看 references/ 文件夹中的代码示例和实现模式。可从 references/styling-patterns.md（样式）、references/navigation-patterns.md（导航）和 references/reanimated-patterns.md（动画）开始。

如何获得支持或查看更多示例？

在技能目录的 Files 标签页中浏览所有可用指南和辅助脚本。根据你的项目需求调整这些模式以获得最佳效果。