react-native
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseReact Native
React Native
The skill is based on React Native, generated at 2026-01-31.
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java.
本技能基于React Native开发，生成于2026年1月31日。
React Native允许你仅使用JavaScript构建移动应用。它采用与React相同的设计理念，让你通过声明式组件组合出丰富的移动UI界面。使用React Native，你构建的不是“移动Web应用”“HTML5应用”或“混合应用”，而是一款真正的移动应用，其体验与使用Objective-C或Java开发的应用毫无区别。
Core References
核心参考
| Topic | Description | Reference |
|---|---|---|
| Core Components | View, Text, Image, TextInput, ScrollView - fundamental UI building blocks | core-components |
| Layout with Flexbox | Flexbox layout system for positioning and aligning components | core-layout |
| Styling | StyleSheet API for creating and organizing component styles | core-styling |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 核心组件 | View、Text、Image、TextInput、ScrollView——基础UI构建模块 | core-components |
| Flexbox布局 | 用于组件定位与对齐的Flexbox布局系统 | core-layout |
| 样式处理 | 用于创建和管理组件样式的StyleSheet API | core-styling |
Features
功能特性
Animations
动画
| Topic | Description | Reference |
|---|---|---|
| Animated API | Create fluid animations with Animated.Value, timing, spring, and gesture integration | features-animations |
| Easing Functions | Easing functions for custom animation curves and natural motion | features-easing |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Animated API | 借助Animated.Value、timing、spring以及手势集成创建流畅动画 | features-animations |
| 缓动函数 | 用于自定义动画曲线和自然运动效果的缓动函数 | features-easing |
User Interactions
用户交互
| Topic | Description | Reference |
|---|---|---|
| Touch Handling | Pressable, Touchable components, and gesture responders for handling user input | features-touch-handling |
| Keyboard | Keyboard API for handling keyboard events, dismissing keyboard, and KeyboardAvoidingView | features-keyboard |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 触摸处理 | Pressable、Touchable组件以及手势响应器，用于处理用户输入 | features-touch-handling |
| 键盘处理 | 用于处理键盘事件、收起键盘以及KeyboardAvoidingView的Keyboard API | features-keyboard |
UI Components
UI组件
| Topic | Description | Reference |
|---|---|---|
| Additional Components | Modal, Switch, ActivityIndicator, RefreshControl for dialogs, toggles, loading states | components-ui |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 扩展组件 | Modal、Switch、ActivityIndicator、RefreshControl，用于对话框、开关、加载状态展示 | components-ui |
Data Display
数据展示
| Topic | Description | Reference |
|---|---|---|
| Lists | FlatList and SectionList for efficiently rendering large, scrollable lists | features-lists |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 列表组件 | FlatList和SectionList，用于高效渲染大型可滚动列表 | features-lists |
Styling and Theming
样式与主题
| Topic | Description | Reference |
|---|---|---|
| Colors and Theming | Colors, PlatformColor, Appearance API for theming and dark mode support | features-colors-theming |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 颜色与主题 | Colors、PlatformColor、Appearance API，用于主题配置与深色模式支持 | features-colors-theming |
Platform Integration
平台集成
| Topic | Description | Reference |
|---|---|---|
| Platform APIs | Linking, Dimensions, Platform detection, AppState, and native integrations | features-platform-apis |
| Network | Fetch API for making HTTP requests and handling network responses | features-network |
| StatusBar | Control status bar appearance, style, and visibility | features-statusbar |
| Share & Vibration | Native share dialog and device vibration for haptic feedback | features-share-vibration |
| Timers | setTimeout, setInterval, requestAnimationFrame for scheduling and delays | features-timers |
| Platform-Specific APIs | Android (PermissionsAndroid, ToastAndroid, DrawerLayoutAndroid) and iOS (ActionSheetIOS) | features-platform-specific |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 平台API | Linking、Dimensions、平台检测、AppState以及原生集成能力 | features-platform-apis |
| 网络请求 | 用于发起HTTP请求和处理网络响应的Fetch API | features-network |
| 状态栏控制 | 控制状态栏的外观、样式与可见性 | features-statusbar |
| 分享与震动 | 原生分享对话框和设备震动反馈功能 | features-share-vibration |
| 定时器 | setTimeout、setInterval、requestAnimationFrame，用于任务调度与延迟执行 | features-timers |
| 平台专属API | Android（PermissionsAndroid、ToastAndroid、DrawerLayoutAndroid）和iOS（ActionSheetIOS）专属API | features-platform-specific |
Accessibility
无障碍访问
| Topic | Description | Reference |
|---|---|---|
| Accessibility | Screen reader support, accessibility labels, roles, and states | features-accessibility |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 无障碍支持 | 屏幕阅读器支持、无障碍标签、角色与状态配置 | features-accessibility |
Advanced Styling
高级样式
| Topic | Description | Reference |
|---|---|---|
| Transforms | 2D and 3D transforms for rotation, scale, translation, and skew | features-transforms |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 变换效果 | 2D与3D变换，支持旋转、缩放、平移与倾斜 | features-transforms |
Best Practices
最佳实践
| Topic | Description | Reference |
|---|---|---|
| Performance | Performance optimization techniques, profiling, and common bottlenecks | best-practices-performance |
| Debugging | Debugging tools, Dev Menu, LogBox, React Native DevTools, and debugging techniques | best-practices-debugging |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 性能优化 | 性能优化技巧、性能分析以及常见性能瓶颈解决 | best-practices-performance |
| 调试技巧 | 调试工具、开发菜单、LogBox、React Native DevTools以及调试方法 | best-practices-debugging |
Key Recommendations
关键建议
- Use StyleSheet.create() for all styles instead of inline objects
- Use FlatList instead of ScrollView for long lists
- Enable useNativeDriver for animations when possible (transform, opacity)
- Use Pressable for new touch interactions (preferred over Touchable components)
- Handle platform differences with Platform.select() and Platform.OS
- Test on real devices - simulator behavior may differ from actual devices
- Optimize list performance with getItemLayout for fixed-height items
- Use TypeScript for better type safety and developer experience
- 所有样式均使用**StyleSheet.create()**创建，而非内联对象
- 长列表使用FlatList替代ScrollView
- 尽可能为动画启用useNativeDriver（支持transform、opacity属性）
- 新的触摸交互场景优先使用Pressable（优于Touchable系列组件）
- 借助Platform.select()和Platform.OS处理平台差异
- 在真实设备上进行测试——模拟器表现可能与真实设备存在差异
- 为固定高度列表项配置getItemLayout以优化列表性能
- 使用TypeScript提升类型安全性与开发体验