React Native

是什麼

React Native 是 Meta 開發的開源框架，用於使用 React 和 JavaScript（或 TypeScript）構建原生移動應用。你像為 Web 編寫元件那樣編寫元件，但它們渲染為真正的原生 iOS 和 Android UI（使用者介面，螢幕上看得見、可互動的部分）控制元件，而非 web view。大部分程式碼可在兩個平臺間共享，同時在需要時你仍可下沉到平臺特定的原生程式碼。

優勢

• 一套程式碼庫，兩個平臺——在 iOS 和 Android 之間共享大部分邏輯和 UI。
• 使用 React，因此 Web 開發者能很快上手，且生態系統龐大。
• 渲染真正的原生元件，而非 web view，帶來真正原生的體驗。
• Fast Refresh 在編輯時提供近乎即時的反饋。
• 逃生通道：遇到瓶頸時，可用 Swift/Kotlin 編寫原生模組。

取捨

• 可以把"橋接"想成一名在兩個說不同語言的人之間來回傳話的翻譯——每次轉手都會有一點點延遲。JavaScript 與原生之間的橋接，可能會使效能關鍵或動畫密集的工作變得複雜。
• 原生依賴和構建工具鏈可能較為脆弱，且對版本敏感。
• 在棘手的部分，你仍然需要平臺知識（構建 iOS 還需要一臺 Mac）。
• 一些較新的 OS（作業系統，裝置的核心軟體，如 iOS 或 Android）特性會有滯後，要等社群或你自己去封裝。

何時使用

當你希望用一個團隊、一套程式碼庫在 iOS 和 Android 上交付原生應用時，尤其是當團隊已經熟悉 React 時，可以選擇 React Native。它非常適合內容類、電商類和 CRUD 類應用。

與 vibe coding 的契合度

React Native 對 AI 輔助編碼很友好，因為它本質就是 React——助手對元件、hooks 和 props 極為精通。讓模型使用 TypeScript，儘可能保持元件小巧且無狀態，並將其與 Expo 搭配，以獲得輕鬆的構建和原生模組。在一開始就說明目標平臺和所需的任何原生能力，讓生成的程式碼選用正確的庫。

import { Text, Button, View } from "react-native";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}