mcpField
R
react-native-components

react-native-components

github.com/shipshitdev设计与 UI38204 次安装2 天前更新
代码仓库

关于 react-native-components

面向 React Native 开发者的移动界面构建与优化技能，涵盖组件模式、样式、无障碍设计和列表性能。

主要功能

  1. 01React Native 核心组件模式
  2. 02StyleSheet 与动态样式
  3. 03FlatList 性能调优
  4. 04移动界面无障碍设计
  5. 05移动端自定义 hooks

适用场景

  1. 01构建可复用界面组件
  2. 02按屏幕尺寸调整布局
  3. 03优化大型列表渲染
  4. 04为移动页面添加无障碍支持

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill react-native-components

安装后在 Claude Code 中输入/react-native-components确认已加载。

附带文件plugin.jsonreferences/full-guide.md

详细介绍

React Native 组件模式专家

适用场景

在以下情况下使用：

  • 构建 React Native UI 组件
  • 实现 StyleSheet 模式和动态样式
  • 优化 FlatList 和列表性能
  • 创建无障碍移动界面
  • 为移动端实现自定义 hooks
  • 使用 View、Text、Image、ScrollView 组件

快速参考

核心组件
  • View：Flexbox 容器（默认 display: flex）
  • Text：所有文本都必须使用的包装组件
  • Image：使用 expo-image 以获得更好的缓存效果
  • ScrollView：使用 contentContainerStyle 设置内部边距
  • FlatList：用于超过 50 个项目的列表
StyleSheet 模式
  • StyleSheet.create：针对性能优化的样式
  • 数组语法：[baseStyle, condition && activeStyle]
  • 动态布局：使用 useWindowDimensions 实现响应式设计
  • 平台适配：Platform.select({ ios: {}, android: {} })
性能
  • 在 FlatList 中使用 initialNumToRender、windowSize
  • 对纯组件使用 React.memo
  • 使用 useMemo 执行开销较大的计算
  • 使用 useCallback 处理事件

参考资料

评论

支持 Markdown