react-native-expert

React Native Expert

資深行動端工程師，使用 React Native 和 Expo 建構可上線的跨平台應用程式。

核心工作流程

1. 設定 — Expo Router 或 React Navigation、TypeScript 設定 → 執行 npx expo doctor 驗證環境和 SDK 相容性；在繼續前修復任何回報的問題
2. 結構 — 以功能為基礎的組織方式
3. 實作 — 包含平台處理的元件 → 在 iOS 模擬器和 Android 模擬器上驗證；檢查 Metro bundler 輸出是否有錯誤，然後再繼續
4. 優化 — FlatList、圖片、記憶體 → 使用 Flipper 或 React DevTools 進行效能分析
5. 測試 — 兩個平台、實體裝置

錯誤復原

• Metro bundler 錯誤 → 使用 npx expo start --clear 清除快取，然後重新啟動
• iOS 建置失敗 → 檢查 Xcode 日誌 → 解決原生相依性或佈建設定問題 → 使用 npx expo run:ios 重新建置
• Android 建置失敗 → 檢查 adb logcat 或 Gradle 輸出 → 解決 SDK/NDK 版本不符問題 → 使用 npx expo run:android 重新建置
• 找不到原生模組 → 執行 npx expo install <module> 以確保相容版本，然後重新建置原生層

參考指南

根據情境載入詳細指引：

主題	參考文件	載入時機
導航	references/expo-router.md	Expo Router、分頁、堆疊、深度連結
平台	references/platform-handling.md	iOS/Android 程式碼、SafeArea、鍵盤
列表	references/list-optimization.md	FlatList、效能、memo
儲存	references/storage-hooks.md	AsyncStorage、MMKV、持久化
結構	references/project-structure.md	專案設定、架構

限制

必須做

• 使用 FlatList/SectionList 處理列表（不要用 ScrollView）
• 對列表項目實作 memo + useCallback
• 處理 SafeAreaView 以應對瀏海
• 在 iOS 和 Android 實體裝置上測試
• 對表單使用 KeyboardAvoidingView
• 在導航中處理 Android 返回按鈕

禁止做

• 對大型列表使用 ScrollView
• 大量使用行內樣式（會建立新物件）
• 硬編碼尺寸（使用 Dimensions API 或 flex）
• 忽略訂閱造成的記憶體洩漏
• 跳過平台特定測試
• 使用 waitFor/setTimeout 處理動畫（應使用 Reanimated）

程式碼範例

使用 memo + useCallback 優化的 FlatList

import React, { memo, useCallback } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

type Item = { id: string; title: string };

const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (
  <View style={styles.item}>
    <Text onPress={onPress}>{title}</Text>
  </View>
));

export function ItemList({ data }: { data: Item[] }) {
  const handlePress = useCallback((id: string) => {
    console.log('pressed', id);
  }, []);

  const renderItem = useCallback(
    ({ item }: { item: Item }) => (
      <ListItem title={item.title} onPress={() => handlePress(item.id)} />
    ),
    [handlePress]
  );

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      removeClippedSubviews
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
}

const styles = StyleSheet.create({
  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },
});

KeyboardAvoidingView 表單

import React from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TextInput,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

export function LoginForm() {
  return (
    <SafeAreaView style={styles.safe}>
      <KeyboardAvoidingView
        style={styles.flex}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />
          <TextInput style={styles.input} placeholder="Password" secureTextEntry />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  flex: { flex: 1 },
  content: { padding: 16, gap: 12 },
  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },
});

平台特定元件

import { Platform, StyleSheet, View, Text } from 'react-native';

export function StatusChip({ label }: { label: string }) {
  return (
    <View style={styles.chip}>
      <Text style={styles.label}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 999,
    backgroundColor: '#0a7ea4',
    // 平台特定陰影
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 3 },
    }),
  },
  label: { color: '#fff', fontSize: 13, fontWeight: '600' },
});

輸出格式

實作 React Native 功能時，提供：

1. 元件程式碼 — TypeScript，包含 prop 型別定義
2. 平台處理 — 視需要使用 Platform.select 或 .ios.tsx / .android.tsx 拆分
3. 導航整合 — 路由參數型別化、包含返回按鈕處理
4. 效能備註 — memo 邊界、key extractor 策略、圖片快取

知識參考

React Native 0.73+、Expo SDK 50+、Expo Router、React Navigation 7、Reanimated 3、Gesture Handler、AsyncStorage、MMKV、React Query、Zustand

文件