ReactNativeElements最佳实践Skill react-native-elements

---

名称: react-native-elements 描述: React Native Elements UI 组件库的最佳实践，针对性能、主题和正确组件使用。在构建 React Native 应用时使用 RNE，配置主题，优化列表与 ListItem，或审查 RNE 组件代码时参考。

社区 React Native Elements 最佳实践

React Native Elements 应用程序的全面最佳实践指南。包含 8 个类别中的 45 条规则，按影响优先级排序，以指导组件使用、主题和性能优化。

何时应用

在以下情况下参考这些指南：

• 在新项目中设置 React Native Elements
• 配置 ThemeProvider 和 createTheme
• 使用 ListItem 组件构建列表
• 实现带有 Input 和 SearchBar 的表单输入
• 使用 RNE 组件优化 FlatList 性能
• 审查使用 React Native Elements 的代码

规则类别按优先级排序

优先级	类别	影响	前缀
1	导入与设置	关键	setup-
2	主题架构	关键	theme-
3	组件选择	高	comp-
4	列表性能	高	list-
5	属性与配置	中高	props-
6	样式模式	中	style-
7	回调与事件	中	event-
8	高级模式	低	adv-

快速参考

1. 导入与设置（关键）

• setup-themeprovider - 使用 ThemeProvider 包装应用以实现一致主题
• setup-imports - 正确使用 @rneui/themed 与 @rneui/base
• setup-createtheme - 使用 createTheme 进行类型安全主题配置
• setup-tree-shaking - 启用适当的树摇以减小包大小
• setup-safe-area - 为刘海屏设备配置 SafeAreaProvider

2. 主题架构（关键）

• theme-usetheme-hook - 使用 useTheme 钩子响应式访问主题
• theme-dark-mode - 使用 createTheme 配置浅色/深色模式
• theme-component-defaults - 在主题中设置组件默认值
• theme-updatetheme - 运行时主题更新而无需重新挂载
• theme-color-scheme - 与系统颜色方案同步
• theme-custom-colors - 安全地扩展主题以添加自定义颜色

3. 组件选择（高）

• comp-listitem-over-view - 使用 ListItem 作为列表行
• comp-input-over-textinput - 使用 Input 作为表单字段
• comp-searchbar-platform - 平台特定的 SearchBar 变体
• comp-button-type - 使用 Button 的 type 属性进行变体
• comp-icon-source - 明智选择 Icon 类型以减小包大小
• comp-avatar-vs-image - 使用 Avatar 作为个人资料图片

4. 列表性能（高）

• list-memo-items - 在 FlatList 中记忆化 ListItem
• list-keyextractor - 始终提供 keyExtractor
• list-getitemlayout - 对固定高度使用 getItemLayout
• list-renderitem-callback - 使用 useCallback 提取 renderItem
• list-windowsize - 配置 windowSize 以平衡内存
• list-virtualized - 使用 FlatList 而非 ScrollView
• list-removeClipped - 谨慎配置 removeClippedSubviews

5. 属性与配置（中高）

• props-loading-state - 对异步操作使用 loading 属性
• props-disabled-styling - 为反馈配置 disabledStyle
• props-input-validation - 使用 errorMessage 进行验证
• props-icon-configuration - 正确配置 Icon 属性
• props-searchbar-loading - 在 SearchBar 中显示加载状态
• props-button-color - 使用 color 属性表示语义颜色

6. 样式模式（中）

• style-stylesheet - 使用 StyleSheet.create 而非内联对象
• style-containerStyle - 对包装器使用 containerStyle
• style-usememo-dynamic - 记忆化动态样式
• style-theme-colors - 使用主题颜色而非硬编码值
• style-component-props - 优先使用组件特定的样式属性

7. 回调与事件（中）

• event-usecallback - 使用 useCallback 包装处理器
• event-debounce-search - 防抖 SearchBar 的 onChangeText
• event-listitem-onpress - 正确传递项目数据
• event-avoid-anonymous - 避免在渲染中使用匿名函数
• event-input-handlers - 高效配置 Input 处理器

8. 高级模式（低）

• adv-custom-component - 正确包装 RNE 组件
• adv-platform-specific - 处理平台特定属性
• adv-makeStyles - 使用 makeStyles 进行主题感知样式
• adv-overlay-modal - 正确选择 Overlay 与 Modal
• adv-image-component - 为缓存配置 Avatar ImageComponent

如何使用

阅读单独的参考文件以获取详细解释和代码示例：

• 部分定义 - 类别结构和影响级别
• 规则模板 - 添加新规则的模板

参考文件

文件	描述
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息