使用 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 生成项目是多么容易，以及我们如何使用组件的颜色属性为应用程序设置主题。