跳到主要內容

使用函式庫

React Native 提供了一組內建的核心組件和 API，可直接在你的應用程式中使用。你不僅限於 React Native 捆綁的組件和 API。React Native 擁有由數千名開發者組成的社群。如果核心組件和 API 沒有你想要的功能，你或許可以從社群中找到並安裝函式庫，將該功能新增到你的應用程式中。

選擇套件管理器​

React Native 函式庫通常是從 npm registry 安裝的，使用 Node.js 套件管理器，例如 npm CLI 或 Yarn Classic。

如果你的電腦上已安裝 Node.js，那麼你已經安裝了 npm CLI。有些開發者偏好使用 Yarn Classic，因為它安裝速度稍快，並且提供額外的進階功能，例如 Workspaces。這兩種工具都非常適合 React Native。為了簡化說明，在本指南的其餘部分，我們將假設使用 npm。

💡 在 JavaScript 社群中，「函式庫」和「套件」這兩個詞彙可以互換使用。

安裝函式庫​

若要在你的專案中安裝函式庫，請在終端機中導航至你的專案目錄，然後執行安裝命令。我們來試試看 react-native-webview

shell
npm install react-native-webview

我們安裝的函式庫包含原生程式碼，因此在使用之前，我們需要連結到我們的應用程式。

連結 iOS 上的原生程式碼​

React Native 使用 CocoaPods 來管理 iOS 專案相依性，而大多數 React Native 函式庫都遵循相同的慣例。如果你使用的函式庫沒有遵循此慣例，請參閱其 README 以取得其他指示。在大多數情況下，以下指示將適用。

在我們的 ios 目錄中執行 pod install，以便將其連結到我們的原生 iOS 專案。一個無需切換到 ios 目錄的快捷方式是執行 npx pod-install。

bash
npx pod-install

完成後，重新建置應用程式二進制檔，即可開始使用你的新函式庫

shell
npm run ios

連結 Android 上的原生程式碼​

React Native 使用 Gradle 來管理 Android 專案相依性。在你安裝具有原生相依性的函式庫後，你需要重新建置應用程式二進制檔才能使用你的新函式庫

shell
npm run android

尋找函式庫​

React Native Directory 是一個可搜尋的資料庫，其中包含專為 React Native 建置的函式庫。這是為你的 React Native 應用程式尋找函式庫的首選之地。

你在該目錄中找到的許多函式庫都來自 React Native Community 或 Expo。

由 React Native Community 建置的函式庫是由志工和依賴 React Native 的公司個人所驅動。它們通常支援 iOS、tvOS、Android、Windows，但這會因專案而異。此組織中的許多函式庫曾經是 React Native 核心組件和 API。

由 Expo 建置的函式庫全部以 TypeScript 編寫，並在可能的情況下支援 iOS、Android 和 react-native-web。

在 React Native Directory 之後，如果你在該目錄中找不到專為 React Native 設計的函式庫，則 npm registry 是次佳選擇。npm registry 是 JavaScript 函式庫的權威來源，但它列出的函式庫可能並非都與 React Native 相容。React Native 是眾多 JavaScript 程式設計環境之一，包括 Node.js、網頁瀏覽器、Electron 等，而 npm 包含適用於所有這些環境的函式庫。

判斷函式庫相容性​

它是否適用於 React Native？​

通常，專為其他平台建置的函式庫將無法與 React Native 搭配使用。範例包括為網頁建置並專門針對 react-dom 的 react-select，以及為 Node.js 建置並與你的電腦檔案系統互動的 rimraf。其他函式庫（例如 lodash）僅使用 JavaScript 語言功能，並且可在任何環境中運作。隨著時間的推移，你將對此有所了解，但在那之前，找出答案最簡單的方法是親自嘗試。如果發現它在 React Native 中無法運作，你可以使用 npm uninstall 移除套件。

它是否適用於我的應用程式支援的平台？​

React Native Directory 允許你依平台相容性篩選，例如 iOS、Android、Web 和 Windows。如果你想使用的函式庫目前未在其中列出，請參閱該函式庫的 README 以了解更多資訊。

它是否適用於我的應用程式的 React Native 版本？​

函式庫的最新版本通常與最新版本的 React Native 相容。如果你使用的是舊版本，則應參閱 README 以了解應安裝哪個版本的函式庫。你可以透過執行 npm install <library-name>@<version-number> 來安裝特定版本的函式庫，例如：npm install @react-native-community/netinfo@^2.0.0。