react-native-elements-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Community React Native Elements Best Practices

社区版React Native Elements最佳实践

Comprehensive best practices guide for React Native Elements applications. Contains 45 rules across 8 categories, prioritized by impact to guide component usage, theming, and performance optimization.

这是一份针对React Native Elements应用的全面最佳实践指南，包含8个类别下的45条规则，按影响优先级排序，指导组件使用、主题定制和性能优化。

When to Apply

适用场景

Reference these guidelines when:

Setting up React Native Elements in a new project
Configuring ThemeProvider and createTheme
Building lists with ListItem components
Implementing form inputs with Input and SearchBar
Optimizing FlatList performance with RNE components
Reviewing code using React Native Elements

在以下场景中可参考本指南：

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

Rule Categories by Priority

按优先级划分的规则类别


setup-
theme-
comp-
list-
props-
style-
event-
adv-

Priority	Category	Impact	Prefix
1	Import & Setup	CRITICAL	`setup-`
2	Theme Architecture	CRITICAL	`theme-`
3	Component Selection	HIGH	`comp-`
4	List Performance	HIGH	`list-`
5	Props & Configuration	MEDIUM-HIGH	`props-`
6	Styling Patterns	MEDIUM	`style-`
7	Callbacks & Events	MEDIUM	`event-`
8	Advanced Patterns	LOW	`adv-`


setup-
theme-
comp-
list-
props-
style-
event-
adv-

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

Quick Reference

快速参考

1. Import & Setup (CRITICAL)

1. 导入与搭建（关键）

```
setup-themeprovider
```
- Wrap app with ThemeProvider for consistent theming
```
setup-imports
```
- Use @rneui/themed vs @rneui/base correctly
```
setup-createtheme
```
- Type-safe theme configuration with createTheme
```
setup-tree-shaking
```
- Enable proper tree-shaking for bundle size
```
setup-safe-area
```
- Configure SafeAreaProvider for notched devices

```
setup-themeprovider
```
- 使用ThemeProvider包裹应用以实现一致的主题效果
```
setup-imports
```
- 正确使用@rneui/themed和@rneui/base
```
setup-createtheme
```
- 使用createTheme进行类型安全的主题配置
```
setup-tree-shaking
```
- 启用正确的Tree Shaking以减小包体积
```
setup-safe-area
```
- 为带刘海的设备配置SafeAreaProvider

2. Theme Architecture (CRITICAL)

2. 主题架构（关键）

```
theme-usetheme-hook
```
- Access theme reactively with useTheme
```
theme-dark-mode
```
- Configure light/dark mode with createTheme
```
theme-component-defaults
```
- Set component defaults in theme
```
theme-updatetheme
```
- Runtime theme updates without remount
```
theme-color-scheme
```
- Sync with system color scheme
```
theme-custom-colors
```
- Extend theme with custom colors safely

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

3. Component Selection (HIGH)

3. 组件选择（高）

```
comp-listitem-over-view
```
- Use ListItem for list rows
```
comp-input-over-textinput
```
- Use Input for form fields
```
comp-searchbar-platform
```
- Platform-specific SearchBar variants
```
comp-button-type
```
- Use Button type prop for variants
```
comp-icon-source
```
- Choose Icon type wisely for bundle size
```
comp-avatar-vs-image
```
- Use Avatar for profile images

```
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 Performance (HIGH)

4. 列表性能（高）

```
list-memo-items
```
- Memoize ListItem in FlatList
```
list-keyextractor
```
- Always provide keyExtractor
```
list-getitemlayout
```
- Use getItemLayout for fixed heights
```
list-renderitem-callback
```
- Extract renderItem with useCallback
```
list-windowsize
```
- Configure windowSize for memory balance
```
list-virtualized
```
- Use FlatList over ScrollView
```
list-removeClipped
```
- Configure removeClippedSubviews carefully

```
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 & Configuration (MEDIUM-HIGH)

5. 属性与配置（中高）

```
props-loading-state
```
- Use loading prop for async operations
```
props-disabled-styling
```
- Configure disabledStyle for feedback
```
props-input-validation
```
- Use errorMessage for validation
```
props-icon-configuration
```
- Configure Icon props correctly
```
props-searchbar-loading
```
- Show loading state in SearchBar
```
props-button-color
```
- Use color prop for semantic colors

```
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. Styling Patterns (MEDIUM)

6. 样式模式（中）

```
style-stylesheet
```
- Use StyleSheet.create over inline objects
```
style-containerStyle
```
- Use containerStyle for wrappers
```
style-usememo-dynamic
```
- Memoize dynamic styles
```
style-theme-colors
```
- Use theme colors over hardcoded values
```
style-component-props
```
- Prefer component-specific style props

```
style-stylesheet
```
- 使用StyleSheet.create而非内联样式对象
```
style-containerStyle
```
- 使用containerStyle处理容器样式
```
style-usememo-dynamic
```
- 对动态样式进行记忆化处理
```
style-theme-colors
```
- 使用主题颜色而非硬编码值
```
style-component-props
```
- 优先使用组件专属的样式属性

7. Callbacks & Events (MEDIUM)

7. 回调与事件（中）

```
event-usecallback
```
- Wrap handlers in useCallback
```
event-debounce-search
```
- Debounce SearchBar onChangeText
```
event-listitem-onpress
```
- Pass item data correctly
```
event-avoid-anonymous
```
- Avoid anonymous functions in renders
```
event-input-handlers
```
- Configure Input handlers efficiently

```
event-usecallback
```
- 用useCallback包裹事件处理函数
```
event-debounce-search
```
- 对SearchBar的onChangeText进行防抖处理
```
event-listitem-onpress
```
- 正确传递item数据
```
event-avoid-anonymous
```
- 在渲染中避免使用匿名函数
```
event-input-handlers
```
- 高效配置Input的事件处理函数

8. Advanced Patterns (LOW)

8. 高级模式（低）

```
adv-custom-component
```
- Wrap RNE components correctly
```
adv-platform-specific
```
- Handle platform-specific props
```
adv-makeStyles
```
- Use makeStyles for theme-aware styles
```
adv-overlay-modal
```
- Choose Overlay vs Modal correctly
```
adv-image-component
```
- Configure Avatar ImageComponent for caching

```
adv-custom-component
```
- 正确封装RNE组件
```
adv-platform-specific
```
- 处理平台专属属性
```
adv-makeStyles
```
- 使用makeStyles实现主题感知的样式
```
adv-overlay-modal
```
- 正确选择Overlay和Modal
```
adv-image-component
```
- 配置Avatar的ImageComponent以实现缓存

How to Use

使用方法

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

阅读单个参考文件获取详细说明和代码示例：

章节定义 - 类别结构和影响级别
规则模板 - 添加新规则的模板

Reference Files

参考文件

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

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