已發布·持續改進
Framework · 2015 年發布
React Native 是使用 React 與 JavaScript 或 TypeScript 建構 Android 與 iOS 應用程式的開源框架，以一套程式碼為兩個平台繪製原生介面。
React Native 是 Meta 於 2015 年發布的開源框架，讓你沿用 React 的元件模型來開發 Android 與 iOS 應用程式。畫面不是在 WebView 中顯示，而是以各平台的原生視圖繪製，因此應用程式的外觀與反應和一般原生應用程式相同。如今它由 Meta 與社群及合作企業共同開發，預設啟用的 New Architecture 讓 JavaScript 與原生程式碼的連接更加直接。
對於已經在網頁上使用 React、希望用相同知識與工具開發行動應用程式的團隊，React Native 特別合適。一套程式碼同時面向兩個平台，需要時仍可用 Kotlin 或 Swift 撰寫原生程式碼擴充，Fast Refresh 能在存檔後立即顯示修改結果。它廣泛用於電商、社群、企業內部應用程式等畫面多、發布節奏快的應用程式，也可以只嵌入既有原生應用程式中的部分畫面。
入門時，依照官方文件的建議使用 Expo 建立專案是最簡單的方式。安裝 Node.js，用 create-expo-app 建立專案，再在手機上安裝 Expo Go 並掃描 QR 碼即可執行。建議先熟悉 React 基礎，再跟著官方文件的核心元件說明與 Expo 教學，動手做一個小型應用程式。
View、Text、Image 等元件以各平台的原生視圖繪製，呈現符合平台習慣的外觀與操作感。
直接使用元件、props、狀態與 Hooks 等 React 概念，以及 TypeScript 與 npm 生態系。
Fast Refresh 在保留狀態的同時套用程式碼修改，React Native DevTools 負責除錯。
透過 New Architecture 的 Turbo Native Module 與 Fabric 元件，可直接連接 Kotlin 與 Swift 程式碼。
React Native 的工具在 Node.js 上執行。從 nodejs.org 安裝 LTS 版本，並確認能顯示版本號。Android 模擬器需要 Android Studio，iOS 模擬器需要 macOS 與 Xcode。
node --version依照官方文件的建議，用 Expo 建立新專案。產生的範本已設定好 TypeScript 與以檔案為基礎的路由（Expo Router）。
npx create-expo-app@latest my-app在專案資料夾中啟動開發伺服器，然後用手機上的 Expo Go 掃描 QR 碼，或在終端機中按 a（Android）或 i（iOS）開啟應用程式。
cd my-app && npx expo start在以 blank-typescript 範本建立的專案中，App.tsx 是應用程式的根元件。View 是版面容器，Text 是顯示文字的核心元件，所有文字都必須放在 Text 之中。以 StyleSheet.create 建立的樣式使用 Flexbox 將內容置中。修改並存檔後，Fast Refresh 會立即更新正在執行的應用程式。
App.tsx
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, world!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
});
npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo start共六章，帶你從安裝一步步認識 React Native 的核心概念。
在這裡提問、分享經驗，交流關於 React Native 的看法。
還沒有討論。來發起第一則吧。
0 則留言
登入 · 登入後即可留言。
來留下第一則留言吧。