使用 Ionic 和 React 構建移動應用程序

Ionic 最近增加了對 React 的支持； 所以現在，React 開發人員可以利用 Ionic 的優勢來構建混合移動應用程序和漸進式 Web 應用程序 (PWA)。 在這篇文章中，我們將通過從頭開始構建一個簡單的演示應用程序，向您展示如何開始使用 Ionic 和 React。

先決條件

為了正確遵循本教程，您需要以下先決條件：

• 在您的系統上安裝最新版本的 Node.js 和 npm，
• TypeScript 和 React 的工作知識。

您可以通過運行以下命令檢查是否安裝了最新的 Node.js 版本 (v10)：

 $ node -v

介紹 React 和 Ionic

讓我們先簡要介紹一下 React 和 Ionic。

根據官方網站：

“React 是一個用於構建用戶界面的聲明式、高效且靈活的 JavaScript 庫。 它使您可以從稱為“組件”的小而孤立的代碼組成複雜的 UI。”

React 專注於構建 UI，並沒有為 Web 開發所需的常見任務提供任何內置工具，例如獲取遠程數據和路由，因此您需要使用一些現有的第三方庫來完成這些任務。

根據離子網站：

“Ionic Framework 是免費的開源移動 UI 工具包，用於為原生 iOS、Android 和 Web 開發高質量的跨平台應用程序——所有這些都來自一個代碼庫。”

基本上，它是一組 UI 組件，您可以使用純 JavaScript 或任何流行的前端框架或庫（例如 Angular、React 或 Vue）來構建混合移動應用程序和 PWA。

在本教程中，我們將看到並使用一些 Ionic UI 組件，例如：

• IonMenu：這樣，導航抽屜將從當前視圖的一側滑入。
• IonToolbar：這些頂欄位於內容的上方或下方。
• IonHeader：這個父組件包含工具欄組件。
• IonContent：該組件提供了一個內容區域，具有控制可滾動區域和其他內容的方法。 您只需要一個視圖內的一個內容組件。
• IonList：該組件包含具有相似數據內容的項目，例如圖像和文本。 它由 IonItem 對象組成。
• IonItem：此組件可能包含文本、圖標、頭像、圖像、輸入和任何其他本機或自定義元素。
• IonButton：這個組件提供了一個可點擊的元素，可以在表單或任何需要簡單、標準按鈕功能的地方使用。
  

安裝 Ionic CLI v5

Ionic 的命令行界面 (CLI) 第 5 版支持基於 React 創建 Ionic 項目。 所以，讓我們開始從 npm 安裝該工具。

打開 CLI，然後運行以下命令：

 $ npm install -g ionic

在撰寫本文時，Ionic 的 CLI v5.2.3 是最新的。

注意：*根據您在系統中安裝 Node.js 的方式，您可能需要在 macOS 或 Linux 中的命令前添加sudo或在 Windows 中以管理員身份運行命令提示符，如果您遇到任何權限錯誤。 您也可以簡單地修復您的 npm 權限或使用諸如 nvm 之類的工具。*

接下來，安裝Cordova Resources （用於在本地生成 Cordova 資源）和Native Run （用於將應用程序二進製文件部署到設備）：

 $ npm install -g cordova-res native-run

僅當您想在真實的移動設備或模擬器上測試您的應用程序時才需要這些。

創建一個 Ionic 和 React 項目

現在，讓我們創建一個基於 React 的項目。 返回您的終端，確保您在工作目錄中，然後運行以下命令：

 $ ionic start myApp --type=react

我們使用--type=react來生成基於 React 的項目。 接下來，您需要從可用模板中選擇一個入門模板。 讓我們為帶有側邊菜單和導航的入門模板選擇sidemenu 。

生成項目並安裝依賴項後，您可以使用以下命令在本地為您的應用提供服務：

 $ cd ./myApp $ ionic serve

您的應用程序可以從 https://localhost:8100 地址訪問，並且您實際上可以使用您的網絡瀏覽器開始使用它。

Ionic 被稱為混合移動框架，因為它利用最初設計用於創建 Web 應用程序的 Web 技術以及本機容器（Cordova 或 Capacitor）來構建移動應用程序，而不使用目標平台的本機技術，例如 Java或用於 Android 的 Kotlin 或用於 iOS 的 Swift。

因為您的移動應用程序實際上是一個 Web 應用程序，所以您可以通過在 Web 瀏覽器中進行測試來進行大部分開發，而無需使用模擬器或真正的移動設備，除非您測試本機設備功能，例如相機或 SQLite 存儲，以防萬一已經在您的應用中使用過它們。 事實上，甚至可以使用某些技術來模仿提供本機功能的插件，並在您的 Web 瀏覽器中進行開發期間的整個測試。

清理我們的項目

我們有應用程序的基本結構，有兩個頁面（主頁和列表）和一個菜單。 讓我們刪除列表頁面，因為它只是樣板代碼。

首先，刪除src/pages/List.tsx文件，然後打開src/App.tsx文件，並從appPages數組中刪除列表頁面的條目：

 const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];

此外，從文件中刪除列表頁面的導入：

 import List from './pages/List';

接下來，從App組件中刪除<Route path="/:tab(home)/list" component={List} exact={true} /> ：

 const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;

App組件是我們的應用程序渲染的根組件。 如果您打開src/index.tsx文件，您會發現以下代碼：

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

render() 方法用於將 React 元素渲染到提供的root元素中的 DOM 中。

應用程序主題

創建、服務和清理我們的 Ionic 項目後，現在讓我們看看如何更改 UI 的顏色，使其看起來更專業。

讓我們從側面菜單開始。 打開src/components/Menu.tsx文件，向IonToolbar 、 IonContent 、 IonList和IonItem UI 組件添加一個具有primary值的color屬性：

 const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> ); const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );

Ionic 提供了一些默認顏色（primary、secondary、tertiary、success、warning、danger、light、medium 和 dark），可以用來改變 UI 組件的顏色。 可以將顏色應用於 Ionic 組件，以使用color屬性更改默認顏色。 有關詳細信息，請參閱“顏色”。

這些顏色具有默認值，但您可以通過一些預定義的 CSS 變量自定義它們。 請參閱“修改顏色”。

這是我們菜單的截圖：

接下來，讓我們更改主頁的顏色。 打開src/pages/Home.tsx文件，將IonToolbar和IonContent組件的color屬性設置為primary ：

 const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };

這是頁面截圖：

安裝 Axios 並使用 REST API

我們將看到如何在我們的應用程序中安裝 Axios 並使用第三方 RESTful API，我們還將看到如何使用 Ionic 卡和列表組件顯示獲取的數據。

主題化了我們的應用程序之後，現在讓我們看看如何使用 Axios 獲取數據。 我們將使用 NewsAPI.org 提供的第三方 API。

首先，我們需要獲取一個 API 密鑰，以便我們可以與 API 進行通信。 轉到註冊頁面，輸入您的信息，然後註冊一個帳戶。 您將獲得一個 API 密鑰； 注意它，讓我們繼續。

回到你的終端，運行以下命令來安裝 Axios：

 $ npm install axios --save

接下來，打開src/pages/Home.tsx文件，首先導入 Axios 和IonButton ：

 import { IonButton } from '@ionic/react'; import axios from 'axios';

接下來，定義API_KEY和URL常量變量：

 const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

在 URL 變量中，我們將添加一個端點以從我們的來源 TechCrunch 獲取頭條新聞。 您可以使用可用來源中的任何來源。

注意：確保將您自己的 API 密鑰放入API_KEY變量中。

接下來，定義fetchArticles()方法如下：

 const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };

我們只需調用axios()方法向新聞端點發送 GET 請求，該方法的結果是一個需要解析才能獲取新聞數據的承諾。

接下來，更新HomePage組件，調用fetchArticles()方法並解析返回的 Promise：

 const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };

在我們的函數組件中，我們首先調用 React 的useState()鉤子來創建articles狀態變量，該變量將保存我們從 API 中獲取的新聞文章。

useState()返回狀態變量，它有一個空數組作為它的初始值和一個我們可以用來改變變量值的函數。 我們使用解構賦值將返回對中的值解包為不同的變量（即articles和setArticles() ）。

接下來，我們調用useEffect()鉤子在我們的組件中執行副作用。 在我們的例子中，副作用是使用fetchArticles()方法從新聞 API 中獲取數據，該方法返回一個承諾。 一旦 promise 被解決，我們調用setArticles()方法將articles數據分配給 article 變量。

useState()和useEffect()都是 React 16.8 中引入的內置 React 鉤子； 它們只是讓您無需編寫類即可使用狀態和其他 React 功能。 useEffect()掛鉤相當於調用組合在基於類的組件中的componentDidMount 、 componentDidUpdate和componentWillUnmount生命週期方法。

最後，在視圖模板中，我們使用map()方法遍歷articles數組，並在IonList組件的IonItem元素中顯示每篇新聞文章的標題，以及將我們帶到頁面的按鈕全文。

這是頁面截圖：

您可以在此 GitHub 存儲庫中找到源代碼。

結論

在本教程中，我們開始使用 Ionic 和 React，並使用它們構建一個簡單的移動應用程序，該應用程序使用 Axios 客戶端從第三方 API 獲取和顯示新聞數據。 我們還看到瞭如何在 React 中使用鉤子——即useState()和useEffect()鉤子——在 React 函數組件中創建狀態和執行副作用。 使用 Ionic，我們已經看到基於 React 生成項目是多麼容易，以及我們如何使用組件的顏色屬性為應用程序設置主題。