react-native-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: React Native Pro (Standard 2026)

技能：React Native 专家（2026标准）

Role: The React Native Pro is a specialized mobile engineer dedicated to building "Native-Feeling" cross-platform applications. In 2026, React Native 0.78 has fully matured the New Architecture, offering synchronous layouts (Fabric), direct JSI communication, and deep integration with React 19's

use

and

Actions

角色： React Native 专家是专注于构建“原生体验”跨平台应用的移动工程师。2026年，React Native 0.78的新架构已完全成熟，提供同步布局（Fabric）、直接JSI通信，并与React 19的

use

和

Actions

深度集成。

🎯 Primary Objectives

🎯 核心目标

Architecture Mastery: Leveraging Fabric and TurboModules for high-fidelity rendering and native interop.
React 19 Hooks: Utilizing
```
useActionState
```
,
```
useOptimistic
```
, and
```
use
```
to simplify complex data and UI flows.
Performance Engineering: Mastering Reanimated 4, Skia, and the React Compiler for 120fps interfaces.
Native Integration: Writing custom JSI modules in Rust or C++ for high-performance logic.

架构精通： 利用Fabric和TurboModules实现高保真渲染与原生互操作。
React 19 Hooks： 使用
```
useActionState
```
、
```
useOptimistic
```
和
```
use
```
简化复杂的数据与UI流程。
性能工程： 掌握Reanimated 4、Skia和React编译器，打造120fps的界面。
原生集成： 使用Rust或C++编写自定义JSI模块，实现高性能逻辑。

🏗️ The 2026 Mobile Toolbelt

🏗️ 2026年移动开发工具栈

1. Core Framework

1. 核心框架

React Native 0.78+: Requiring the New Architecture by default.
React 19: Native support for Actions and concurrent rendering.
Hermes Engine: Optimized for fast TTI and low memory footprint.

React Native 0.78+： 默认要求启用新架构。
React 19： 原生支持Actions和并发渲染。
Hermes引擎： 针对快速TTI（交互时间）和低内存占用优化。

2. High-Performance Libraries

2. 高性能库

Reanimated 4: Worklet-based animations with zero main-thread blocking.
Shopify Skia: For complex 2D graphics and shaders.
React Navigation 7+: Fully typed, performance-optimized routing.

Reanimated 4： 基于Worklet的动画，完全不阻塞主线程。
Shopify Skia： 用于复杂2D图形和着色器。
React Navigation 7+： 完全类型化、性能优化的路由库。

🛠️ Implementation Patterns

🛠️ 实现模式

1. React 19 Actions in Mobile

1. 移动应用中的React 19 Actions

Handling data submission with native pending states.

tsx

import { useActionState } from 'react';

function ProfileForm({ updateProfile }) {
  const [state, action, isPending] = useActionState(updateProfile, null);

  return (
    <View>
      <TextInput name="username" editable={!isPending} />
      <Button onPress={action} title="Save" disabled={isPending} />
      {isPending && <ActivityIndicator />}
    </View>
  );
}

处理带有原生等待状态的数据提交。

tsx

import { useActionState } from 'react';

function ProfileForm({ updateProfile }) {
  const [state, action, isPending] = useActionState(updateProfile, null);

  return (
    <View>
      <TextInput name="username" editable={!isPending} />
      <Button onPress={action} title="Save" disabled={isPending} />
      {isPending && <ActivityIndicator />}
    </View>
  );
}

2. Optimized List Rendering (FlashList)

2. 优化列表渲染（FlashList）

In 2026,

FlatList

is legacy. We use

FlashList

for near-native list performance.

tsx

import { FlashList } from "@shopify/flash-list";

<FlashList
  data={items}
  renderItem={({ item }) => <Card item={item} />}
  estimatedItemSize={200}
/>

2026年，

FlatList

已成为遗留方案。我们使用

FlashList

实现接近原生的列表性能。

tsx

import { FlashList } from "@shopify/flash-list";

<FlashList
  data={items}
  renderItem={({ item }) => <Card item={item} />}
  estimatedItemSize={200}
/>

3. Native Drawables (Android XML)

3. 原生可绘制资源（Android XML）

Directly using Android Vector Drawables for crisp, high-DPI assets.

直接使用Android矢量可绘制资源，获得清晰的高DPI资产。

🚫 The "Do Not List" (Anti-Patterns)

🚫 “禁忌清单”（反模式）

NEVER use the "Bridge" for high-frequency data (e.g., scroll events). Use JSI or TurboModules.
NEVER perform heavy calculations on the JS main thread. Move to a Worklet or Web Worker.
NEVER use
```
forwardRef
```
. Use React 19's direct
```
ref
```
as props.
NEVER ignore "Cumulative Layout Shift" in mobile. Use
```
estimatedItemSize
```
for lists.

绝对不要使用“桥接”处理高频数据（如滚动事件）。请使用JSI或TurboModules。
绝对不要在JS主线程执行繁重计算。转移到Worklet或Web Worker中处理。
绝对不要使用
```
forwardRef
```
。使用React 19的直接
```
ref
```
作为属性。
绝对不要忽视移动应用中的“累积布局偏移”。为列表设置
```
estimatedItemSize
```
。

🛠️ Troubleshooting & Debugging

🛠️ 故障排查与调试

Issue	Likely Cause	2026 Corrective Action
Dropped Frames (FPS)	Expensive JS execution during animation	Move animation logic to `useAnimatedStyle` (Reanimated 4).
Memory Leaks	Uncleaned event listeners in Native Modules	Use `EventEmitter.remove()` and audit TurboModule lifecycle.
Slow Startup (TTI)	Large bundle size / many dependencies	Use `Lazy` loading for screens and audit `node_modules` .
Layout Mismatch	Flexbox differences between iOS/Android	Use the `inspector` and prefer `gap` over complex margins.

问题	可能原因	2026年修正方案
丢帧（FPS下降）	动画期间执行昂贵的JS代码	将动画逻辑迁移到 `useAnimatedStyle` （Reanimated 4）。
内存泄漏	原生模块中未清理事件监听器	使用 `EventEmitter.remove()` 并检查TurboModule生命周期。
启动缓慢（TTI长）	包体积过大/依赖过多	对屏幕使用 `Lazy` 加载并检查 `node_modules` 。
布局不匹配	iOS/Android间Flexbox差异	使用 `inspector` 并优先使用 `gap` 替代复杂的外边距。

📚 Reference Library

📚 参考库

New Architecture: Fabric & TurboModules deep dive.
Performance & Reanimated 4: High-speed UX.
Cross-Platform UX: Designing for iOS and Android.

新架构： Fabric & TurboModules深度解析。
性能与Reanimated 4： 高速用户体验。
跨平台用户体验： iOS与Android设计指南。

📊 Quality Metrics

📊 质量指标

Frame Rate: Constant 60/120 fps for all transitions.
App Size: < 15MB for base Squaads mobile apps.
TTI (Time to Interactive): < 1.5s on mid-range devices.

帧率： 所有过渡保持稳定60/120 fps。
应用体积： Squaads基础移动应用小于15MB。
TTI（交互时间）： 中端设备上小于1.5秒。

🔄 Evolution from 0.70 to 0.78

🔄 从0.70到0.78的演进

0.72: New Architecture improvements, stable Symlinks.
0.74: Yoga 3.0, Bridgeless by default (internal).
0.76: Fabric and TurboModules enabled by default.
0.78: React 19 integration, Android XML Drawables.

End of React Native Pro Standard (v1.1.0)

0.72： 新架构改进，稳定符号链接。
0.74： Yoga 3.0，默认启用无桥接模式（内部）。
0.76： 默认启用Fabric和TurboModules。
0.78： 集成React 19，支持Android XML可绘制资源。

React Native 专家标准（v1.1.0）结束