Back to Details

react-native-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native & Expo Best Practices

React Native & Expo 最佳实践

Goal: Build "Write Once, Run Everywhere" mobile apps that feel 100% native.

目标：构建“一次编写，多端运行”且体验100%原生的移动应用。

1. Architecture: Expo Router

1. 架构：Expo Router

File-based Routing: Use
```
app/
```
directory similar to Next.js.
Linking: Define schemes in
```
app.json
```
for deep linking.
Layouts: Use
```
_layout.tsx
```
for shared navigation wrappers (Stack, Tabs).

基于文件的路由：使用类似Next.js的
```
app/
```
目录。
链接配置：在
```
app.json
```
中定义Scheme以支持深度链接。
布局：使用
```
_layout.tsx
```
作为共享导航容器（Stack、Tabs）。

2. UI & Styling

2. UI 与样式

NativeWind: Use
```
nativewind
```
(Tailwind for RN) for styling. It's faster and more familiar.
FlashList: Replace
```
FlatList
```
with Shopify's
```
FlashList
```
for 5x performance on long lists.
Safe Area: Always wrap screen content in
```
SafeAreaView
```
(or use spacing tokens that account for insets).

NativeWind：使用
```
nativewind
```
（适用于RN的Tailwind）进行样式开发，它更快且更易上手。
FlashList：使用Shopify的
```
FlashList
```
替代
```
FlatList
```
，长列表性能提升5倍。
安全区域：始终将屏幕内容包裹在
```
SafeAreaView
```
中（或使用考虑了内边距的间距令牌）。

3. Performance Optimization

3. 性能优化

Image Caching: Use
```
expo-image
```
instead of React Native's
```
<Image />
```
.
- Features: Blurhash, caching, preloading.
Reanimated: Use
```
react-native-reanimated
```
for 60fps animations (runs on UI thread), avoiding the JS bridge.
Hermes: Ensure Hermes engine is enabled in
```
app.json
```
for faster startup and smaller bundle size.

图片缓存：使用
```
expo-image
```
替代React Native的
```
<Image />
```
组件。
- 特性：Blurhash、缓存、预加载。
Reanimated：使用
```
react-native-reanimated
```
实现60fps动画（运行在UI线程），避开JS桥接层。
Hermes：确保在
```
app.json
```
中启用Hermes引擎，以实现更快的启动速度和更小的包体积。

4. Data Management

4. 数据管理

TanStack Query (React Query): Standard for async server state. Handle
```
offline
```
status gracefully.
MMKV: Use
```
react-native-mmkv
```
for synchronous local storage (replacing Async Storage). It is ~30x faster.

TanStack Query（React Query）：异步服务端状态管理的标准方案，优雅处理
```
离线
```
状态。
MMKV：使用
```
react-native-mmkv
```
作为同步本地存储（替代Async Storage），速度快约30倍。

5. Debugging & Dev Experience

5. 调试与开发体验

EAS Build: Use Expo Application Services (EAS) for cloud builds.
Expo Go: Use for rapid prototyping, but switch to "Development Build" (Prebuild) if adding native modules.

Checklist:

Is Hermes enabled?
Are images using
```
expo-image
```
?
Is navigation handled by Expo Router?
Are heavy computations moved off the JS thread?

EAS Build：使用Expo Application Services（EAS）进行云端构建。
Expo Go：用于快速原型开发，但如果添加原生模块，请切换到“开发构建（Prebuild）”。

检查清单：

是否已启用Hermes？
是否使用
```
expo-image
```
处理图片？
是否通过Expo Router处理导航？
是否将繁重计算移出JS线程？