react-native-elements

React Native Elements 社区最佳实践

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

适用场景

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

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

按优先级划分的规则类别

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

快速参考

1. 导入与设置（CRITICAL）

• setup-themeprovider - 使用 ThemeProvider 包裹应用，以保持主题一致
• setup-imports - 正确使用 @rneui/themed 和 @rneui/base
• setup-createtheme - 使用 createTheme 配置类型安全的主题
• setup-tree-shaking - 启用正确的摇树优化，缩小打包体积
• setup-safe-area - 为带刘海的设备配置 SafeAreaProvider

2. 主题架构（CRITICAL）

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

3. 组件选择（HIGH）

• 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. 列表性能（HIGH）

• 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	版本和参考信息