核心組件與原生組件
React Native 是一個開放原始碼框架,用於使用 React 和應用程式平台的原生功能來建置 Android 和 iOS 應用程式。透過 React Native,您可以使用 JavaScript 來存取平台的 API,並使用 React 組件(可重複使用、可巢狀化的程式碼組合)來描述 UI 的外觀和行為。您可以在下一節中瞭解更多關於 React 的資訊。但首先,讓我們介紹組件在 React Native 中的運作方式。
視圖與行動裝置開發
在 Android 和 iOS 開發中,「視圖」是 UI 的基本建構區塊:螢幕上的一個小矩形元素,可用於顯示文字、圖片或回應使用者輸入。即使是應用程式中最小的視覺元素,例如一行文字或一個按鈕,也是一種視圖。某些視圖可以包含其他視圖。一切都是由視圖構成!
原生組件
在 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 也讓您可以為 Android 和 iOS 建置自己的原生組件,以滿足您應用程式的獨特需求。我們還有一個蓬勃發展的社群貢獻組件生態系統。查看 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,請隨時直接跳過。