react-native-elements

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