Expo SDK 52 基於 React Native 0.78 構建,主題是「原生能力民主化」——把以前需要 eject 才能用的功能變成零配置可用。新增的 Expo Modules API v3、Router v4、和 New Architecture 全面默認開啓是這個版本的三大支柱。
Expo Router v4:文件路由的全面進化
Router v4 現在支持嵌套佈局、平行路由和攔截路由,API 設計參考了 Next.js App Router 但針對移動端做了適配。
typescript
// app/_layout.tsx - 根佈局
import { Stack } from 'expo-router';
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
</Stack>
);
}
// app/(tabs)/_layout.tsx - Tab 佈局
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
export default function TabLayout() {
return (
<Tabs>
<Tabs.Screen
name="home"
options={{
title: '首頁',
tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
}}
/>
<Tabs.Screen
name="explore"
options={{
title: '發現',
tabBarIcon: ({ color }) => <Ionicons name="compass" size={24} color={color} />,
}}
/>
</Tabs>
);
}
// app/(tabs)/home/index.tsx
import { Link, useLocalSearchParams } from 'expo-router';
export default function HomeScreen() {
return (
<View>
<Link href="/product/123" asChild>
<TouchableOpacity>
<Text>查看商品詳情</Text>
</TouchableOpacity>
</Link>
</View>
);
}
關鍵改進:路由預加載。用户在 Tab 之間切換時,目標頁面的 bundle 已經在後台加載好了,切換延遲從 200ms 降到幾乎為零。
Expo Modules API v3
v3 讓原生模塊開發變得像寫 React 組件一樣簡單。不再需要手寫 Swift/Kotlin 橋接代碼,用 TypeScript 聲明接口,Expo 自動生成。
typescript
// modules/camera/index.ts
import { requireNativeModule } from 'expo';
interface CameraModule {
takePictureAsync(options?: {
quality?: number;
flashMode?: 'auto' | 'on' | 'off';
}): Promise<{ uri: string; width: number; height: number }>;
startRecordingAsync(options?: {
maxDuration?: number;
quality?: '720p' | '1080p' | '4k';
}): Promise<{ uri: string }>;
stopRecordingAsync(): Promise<void>;
requestPermissionsAsync(): Promise<{ granted: boolean }>;
}
export default requireNativeModule<CameraModule>('ExpoCamera');
// 使用
import Camera from '@/modules/camera';
function PhotoScreen() {
const handleCapture = async () => {
const { granted } = await Camera.requestPermissionsAsync();
if (!granted) return;
const photo = await Camera.takePictureAsync({
quality: 0.9,
flashMode: 'auto',
});
console.log(`照片: ${photo.uri}, ${photo.width}x${photo.height}`);
};
return <Button onPress={handleCapture} title="拍照" />;
}
v3 還支持原生 View 組件的自動生成。你可以用 TypeScript 聲明 props,自動生成 iOS UIView 和 Android View 的綁定代碼。
EAS Build 改進:本地構建和緩存
EAS Build 現在支持本地構建模式,不再需要把代碼上傳到雲端:
json
// eas.json
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"cache": {
"key": "sdk52-rn078",
"paths": ["node_modules/**", ".expo/**"]
}
},
"preview": {
"distribution": "internal",
"ios": {
"simulator": true
}
},
"production": {
"autoIncrement": true,
"env": {
"APP_ENV": "production"
}
}
}
}
bash
# 本地構建,不上傳代碼
eas build --platform ios --profile development --local
# 構建緩存命中率分析
eas build --profile production --cache-stats
# Output:
# node_modules: cache hit (142MB, saved 3m 20s)
# .expo: cache hit (8MB, saved 45s)
# Pods: cache miss (rebuilding)
Expo Dev Tools 重新設計
SDK 52 的開發工具從 CLI 內置改為獨立應用,支持多設備同時調試:
javascript
// app.config.js - 開發工具配置
export default {
expo: {
name: 'MyApp',
plugins: [
[
'expo-dev-client',
{
// 啓用性能面板
performanceMonitor: true,
// 啓用網絡請求攔截
networkInspector: true,
// 自定義開發菜單
devMenuItems: [
{
name: '清除緩存',
action: () => DevMenu.reloadAsync({ purge: true }),
},
],
},
],
],
},
};
新的 Dev Tools 直接顯示幀率曲線、內存趨勢、和網絡瀑布圖,不用再切換到 Xcode/Android Studio。
小結
- Expo Router v4 支持嵌套佈局和平行路由,路由預加載消除 Tab 切換延遲
- Modules API v3 用 TypeScript 聲明原生接口,自動生成 Swift/Kotlin 綁定
- EAS Build 支持本地構建,緩存策略可節省 70% 的構建時間
- Dev Tools 獨立應用支持多設備調試和性能監控
- Expo SDK 52 讓 React Native 開發體驗接近 Web,零 eject 即可訪問全部原生能力