使用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库, 用于构建用户界面。它使你可以从孤立的小代码段(称为“组件”)组成复杂的用户界面。

React专注于构建UI, 并且不提供任何内置工具来完成Web开发所需的常见任务, 例如获取远程数据和路由, 因此你需要使用一些现有的第三方库来执行这些任务。

根据Ionic网站：

“ Ionic Framework是一个免费的开源移动UI工具包, 可用于从单个代码库中为本地iOS, Android和Web开发高质量的跨平台应用程序。”

基本上, 它是一组UI组件, 可与纯JavaScript或任何流行的前端框架或库(例如Angular, React或Vue)一起使用, 以构建混合移动应用程序和PWA。

在本教程中, 我们将看到并使用一些Ionic UI组件, 例如：

• IonMenu：这样, 导航抽屉将从当前视图的侧面滑入。
• IonToolbar：这些顶部栏位于内容上方或下方。
• IonHeader：此父组件包含工具栏组件。
• IonContent：此组件提供了一个内容区域, 以及控制可滚动区域和其他内容的方法。在一个视图中只需要一个内容组件。
• IonList：此组件包含具有相似数据内容的项目, 例如图像和文本。它由IonItem对象组成。
• IonItem：此组件可能包含文本, 图标, 化身, 图像, 输入和任何其他本机或自定义元素。
• IonButton：此组件提供了一个clickable元素, 可以按某种形式或任何需要简单, 标准按钮功能的地方使用。

安装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资源(用于在本地生成Cordova资源)和Native Run(用于将应用程序二进制文件部署到设备)：

$ npm install -g cordova-res native-run

仅当你要在真实的移动设备或仿真器上测试你的应用程序时才需要这些。

创建一个Ionic React项目

现在, 让我们基于React创建一个项目。返回终端, 确保你位于工作目录中, 然后运行以下命令：

$ ionic start myApp --type=react

我们使用–type = react生成基于React的项目。接下来, 你需要从可用模板中选择一个入门模板。让我们从侧面菜单中选择带有侧边菜单和导航的入门模板。

生成项目并安装依赖项之后, 你可以使用以下命令在本地提供你的应用程序：

$ cd ./myApp
$ ionic serve

你可以从http：// localhost：8100地址获得你的应用程序, 并且你实际上可以使用网络浏览器开始使用它。

Ionic之所以称为混合移动框架, 是因为它利用了最初旨在创建Web应用程序的Web技术以及本机容器(Cordova或Capacitor)来构建移动应用程序, 而无需将目标平台(例如Java)使用本机技术或Android的Kotlin或iOS的Swift。

由于你的移动应用程序实际上是一个Web应用程序, 因此你可以通过在Web浏览器中进行测试来进行大多数开发, 而无需使用仿真器或真实的移动设备, 除非测试本机设备功能(例如相机或SQLite存储), 否则在你的应用中使用了它们。实际上, 甚至可以使用某些技术来模仿提供本机功能的插件, 并在你的网络浏览器中进行开发过程中的整个测试。

清洁我们的项目

我们具有应用程序的基本结构, 包括两个页面(主页和列表)和一个菜单。让我们删除列表页面, 因为它只是样板代码。

首先, 删除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} precision = {true} />：

const App: React.FunctionComponent = () => (
  <IonApp>
    <IonReactRouter>
      <IonSplitPane contentId="main">
        <Menu appPages={appPages} />
        <IonPage id="main">
          <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元素渲染到提供的根元素中的DOM中。

主题化应用

创建, 服务和清理了Ionic项目后, 现在让我们看看如何更改UI的颜色, 使其看起来更专业。

让我们开始侧边菜单。打开src / components / Menu.tsx文件, 并向IonToolbar, IonContent, IonList和IonItem UI组件添加具有主值的color属性：

const Menu: React.FunctionComponent = ({ appPages }) => (
  <IonMenu contentId="main">
    <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提供了一些默认颜色(主要, 辅助, 第三, 成功, 警告, 危险, 浅色, 中等和深色), 可用于更改UI组件的颜色。可以将颜色应用于Ionic组件, 以便使用color属性更改默认颜色。有关更多信息, 请参见“颜色”。

这些颜色具有默认值, 但是你可以通过一些预定义的CSS变量自定义它们。请参阅“修改颜色”。

这是我们菜单的屏幕截图：

Ionic菜单。 (

大型预览

)

接下来, 让我们更改主页的颜色。打开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>
    </>
  );
};

这是页面的屏幕截图：

Ionic之家。 (

大型预览

)

安装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()返回状态变量, 该状态变量具有一个空数组作为其初始值以及一个可用于更改变量值的函数。我们使用解构分配将返回的值对中的值解压缩为不同的变量(即article和setArticles())。

接下来, 我们调用useEffect()挂钩在我们的组件中执行副作用。在我们的例子中, 副作用是使用fetchArticles()方法从新闻API获取数据, 该方法返回一个promise。兑现承诺后, 我们将调用setArticles()方法将新闻数据分配给articles变量。

useState()和useEffect()都是React 16.8中引入的内置React挂钩；它们只是让你无需编写类即可使用状态和其他React功能。 useEffect()挂钩等效于调用基于类的组件中组合的componentDidMount, componentDidUpdate和componentWillUnmount生命周期方法。

最后, 在视图模板中, 我们使用map()方法遍历articles数组, 并在IonList组件的IonItem元素内显示每个新闻文章的标题, 以及一个将我们带到页面顶部的按钮。全文。

这是页面的屏幕截图：

Ionic新闻应用程序(

大型预览

)

你可以在此GitHub存储库中找到源代码。

结论

在本教程中, 我们已经开始同时使用Ionic和React, 并使用它们构建了一个简单的移动应用程序, 该应用程序使用Axios客户端从第三方API获取和显示新闻数据。我们还看到了如何在React中使用钩子(即useState()和useEffect()钩子)在React函数组件内部创建状态并执行副作用。使用Ionic, 我们已经看到了基于React生成项目非常容易, 以及如何使用组件的color属性为应用程序设置主题。