跳到主要內容

核心組件與原生組件

React Native 是一個開放原始碼框架,用於使用 React 和應用程式平台的原生功能來建置 Android 和 iOS 應用程式。透過 React Native,您可以使用 JavaScript 來存取平台的 API,並使用 React 組件(可重複使用、可巢狀化的程式碼組合)來描述 UI 的外觀和行為。您可以在下一節中瞭解更多關於 React 的資訊。但首先,讓我們介紹組件在 React Native 中的運作方式。

視圖與行動裝置開發

在 Android 和 iOS 開發中,「視圖」是 UI 的基本建構區塊:螢幕上的一個小矩形元素,可用於顯示文字、圖片或回應使用者輸入。即使是應用程式中最小的視覺元素,例如一行文字或一個按鈕,也是一種視圖。某些視圖可以包含其他視圖。一切都是由視圖構成!

Diagram of Android and iOS app showing them both built on top of atomic elements called views.
僅為 Android 和 iOS 應用程式中使用的眾多視圖範例。

原生組件

在 Android 開發中,您可以使用 Kotlin 或 Java 撰寫視圖;在 iOS 開發中,您可以使用 Swift 或 Objective-C。透過 React Native,您可以使用 React 組件以 JavaScript 呼叫這些視圖。在執行階段,React Native 會為這些組件建立對應的 Android 和 iOS 視圖。由於 React Native 組件由與 Android 和 iOS 相同的視圖支援,因此 React Native 應用程式的外觀、感覺和效能與任何其他應用程式相同。我們將這些平台支援的組件稱為原生組件

React Native 隨附一組基本的、可立即使用的原生組件,您可以使用它們立即開始建置您的應用程式。這些是 React Native 的核心組件

注意

此文件引用了舊版 API,需要更新以反映全新架構

React Native 也讓您可以為 AndroidiOS 建置自己的原生組件,以滿足您應用程式的獨特需求。我們還有一個蓬勃發展的社群貢獻組件生態系統。查看 Native Directory,以了解社群一直在創造什麼。

核心組件

React Native 有許多核心組件,適用於從控制項到活動指示器的所有項目。您可以在 API 章節中找到所有這些組件的文件。您主要會使用以下核心組件

React Native UI 組件Android 視圖iOS 視圖網頁類比描述
<View><ViewGroup><UIView>非捲動 <div>支援 Flexbox 版面配置、樣式、部分觸控處理和輔助功能控制的容器
<Text><TextView><UITextView><p>顯示文字字串、設定樣式和巢狀結構,甚至處理觸控事件
<Image><ImageView><UIImageView><img>顯示不同類型的圖片
<ScrollView><ScrollView><UIScrollView><div>一個通用的捲動容器,可以包含多個組件和視圖
<TextInput><EditText><UITextField><input type="text">允許使用者輸入文字

在下一節中,您將開始組合這些核心組件,以瞭解 React 的運作方式。現在就在這裡試用看看!


由於 React Native 使用與 React 組件相同的 API 結構,因此您需要瞭解 React 組件 API 才能開始使用。 下一節 提供了關於此主題的快速介紹或複習。但是,如果您已經熟悉 React,請隨時直接跳過

A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.