Back to Details

react-native-apps

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native / Mobile Apps

React Native / 移动应用

When to use this skill

何时使用该技能

Building mobile apps with React Native or Expo.
Managing navigation stack.
Accessing native modules.

使用React Native或Expo构建移动应用。
管理导航栈。
访问原生模块。

1. Expo ecosystem

1. Expo生态系统

Expo Router: Use file-based routing (similar to Next.js) via
```
expo-router
```
.
Config: Manage native permissions via
```
app.json
```
config plugins.

Expo Router：通过
```
expo-router
```
使用基于文件的路由（类似Next.js）。
配置：通过
```
app.json
```
配置插件管理原生权限。

2. Styling

2. 样式处理

NativeWind: Use Tailwind-like classes via
```
nativewind
```
if standard, or
```
StyleSheet.create
```
for performance-critical views.
SafeArea: Always wrap top-level screens in
```
SafeAreaView
```
or handle insets manually.

NativeWind：如果是标准场景，通过
```
nativewind
```
使用类Tailwind的样式类；对于性能关键的视图，使用
```
StyleSheet.create
```
。
安全区域：始终将顶级屏幕包裹在
```
SafeAreaView
```
中，或手动处理内边距。

3. Performance

3. 性能优化

Lists: Use
```
FlashList
```
(Shopify) or optimized
```
FlatList
```
for long lists.
Bridge: Minimize passes over the JS bridge. Use Reanimated for 60fps animations.

列表组件：对于长列表，使用Shopify的
```
FlashList
```
或经过优化的
```
FlatList
```
。
JS桥接：尽量减少JS桥接的交互次数。使用Reanimated实现60fps动画。

4. Navigation

4. 导航实现

Stack: Use Stack for drill-down.
Tabs: Use Tabs for top-level sections.
Deep Links: configure generic links in
```
app.json
```
for universal links.

栈导航：使用Stack实现深度跳转。
标签导航：使用Tabs实现顶级板块切换。
深度链接：在
```
app.json
```
中配置通用链接以支持全局链接。