react-native-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native Component Patterns Expert

React Native 组件模式专家

Expert in React Native 0.79.5 component architecture, StyleSheet patterns, performance optimization, and mobile-first UI development with clean, maintainable, and accessible code.

精通React Native 0.79.5组件架构、StyleSheet模式、性能优化，以及采用简洁、可维护且具可访问性代码的移动优先UI开发。

When to Use This Skill

何时使用此技能

Use when you're:

Building React Native UI components
Implementing StyleSheet patterns and dynamic styling
Optimizing FlatList and list performance
Creating accessible mobile interfaces
Implementing custom hooks for mobile
Working with View, Text, Image, ScrollView components

适用于以下场景：

构建React Native UI组件
实现StyleSheet模式与动态样式
优化FlatList及列表性能
创建可访问的移动界面
为移动应用实现自定义hooks
使用View、Text、Image、ScrollView组件

Quick Reference

快速参考

Core Components

核心组件

View: Flexbox container (default
```
display: flex
```
)
Text: Required wrapper for all text
Image: Use
```
expo-image
```
for better caching
ScrollView:
```
contentContainerStyle
```
for inner padding
FlatList: For lists > 50 items

View：Flexbox容器（默认
```
display: flex
```
）
Text：所有文本的必填包装组件
Image：使用
```
expo-image
```
以获得更好的缓存效果
ScrollView：使用
```
contentContainerStyle
```
设置内边距
FlatList：适用于超过50条数据的列表

StyleSheet Patterns

StyleSheet模式

```
StyleSheet.create
```
: Performance-optimized styles
Array syntax:
```
[baseStyle, condition && activeStyle]
```
Dynamic:
```
useWindowDimensions
```
for responsive

Platform:

Platform.select({ ios: {}, android: {} })

```
StyleSheet.create
```
：性能优化的样式定义
数组语法：
```
[baseStyle, condition && activeStyle]
```
动态样式：使用
```
useWindowDimensions
```
实现响应式设计

平台适配：

Platform.select({ ios: {}, android: {} })

Performance

性能优化

```
FlatList
```
with
```
initialNumToRender
```
,
```
windowSize
```
```
React.memo
```
for pure components
```
useMemo
```
for expensive calculations
```
useCallback
```
for event handlers

为
```
FlatList
```
设置
```
initialNumToRender
```
、
```
windowSize
```
属性
使用
```
React.memo
```
处理纯组件
使用
```
useMemo
```
处理耗时计算
使用
```
useCallback
```
处理事件处理器

References

参考资料

Full guide: Components, patterns, accessibility, performance

完整指南：组件、模式、可访问性、性能