Bài 04: Tìm hiểu IonicFramework (React)

 

 React

Cài đặt:

$  npm install -g @ionic/cli

$ ionic start myApp tabs --type react

 

$  ionic serve █

Tạo một dự án với IOnic CLI

Để bắt đầu, hãy cài đặt phiên bản Ionic CLI mới nhất.

$  npm install -g @ionic/cli

Từ đây, lệnh toàn cầu ionicsẽ cho phép tạo một dự án React với Ionic và bất kỳ phụ thuộc nào khác. Để tạo một dự án mới, hãy chạy lệnh sau:

  ionic start myApp blank --type=react

  cd myApp

Từ đây, chúng tôi chạy ionic servevà dự án của chúng tôi đang chạy trên trình duyệt.

A look at a React Component

Cơ sở của ứng dụng của chúng tôi sẽ nằm trong srcthư mục và điểm nhập chính sẽ là của chúng tôi index.tsx. Nếu chúng tôi mở dự án của mình trong trình chỉnh sửa mã và mở src/index.tsx, chúng tôi sẽ thấy như sau:

 import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Vậy điều gì đang xảy ra ở đây? Chà, ba dòng đầu tiên đang kéo theo một số phụ thuộc. Đầu tiên là React chính nó. Điều này cho phép chúng tôi viết các thành phần theo một cú pháp giống HTML được gọi là JSX. Chúng ta sẽ nói về JSX một chút sau.

Lần nhập thứ hai dành cho ReactDOM. Các ReactDOM.renderphương pháp là cụ thể cách thức trình duyệt / DOM lấy linh kiện của chúng tôi và làm cho nó vào một nút DOM được chỉ định.

Lần nhập cuối cùng là thành phần gốc cho ứng dụng của chúng tôi, được đặt tên đơn giản App. Đây là thành phần React đầu tiên của chúng tôi và sẽ được sử dụng trong quá trình khởi động cho ứng dụng React của chúng tôi.

Nếu chúng ta mở App.tsx, chúng ta sẽ thấy như sau.

  import React from 'react';

  import { Route } from 'react-router-dom';

  import { IonApp, IonRouterOutlet } from '@ionic/react';

  import { IonReactRouter } from '@ionic/react-router';

  import Home from './pages/Home';

  

  /* Core CSS required for Ionic components to work properly */

  import '@ionic/react/css/core.css';

  

  const App: React.FC = () => (

    <IonApp>

      <IonReactRouter>

        <IonRouterOutlet>

          <Route path="/home" component={Home} exact={true} />

          <Route exact path="/" render={() => <Redirect to="/home" />} />

        </IonRouterOutlet>

      </IonReactRouter>

    </IonApp>

  );

Thoạt nhìn, có vẻ như rất nhiều thứ đang diễn ra, vì vậy hãy chia nhỏ nó ra, bắt đầu với nhóm hàng nhập khẩu đầu tiên.

  import React from 'react';

  import { Route } from 'react-router-dom';

  import { IonApp, IonRouterOutlet } from '@ionic/react';

  import { IonReactRouter } from '@ionic/react-router';

  import Home from './pages/Home'; 

Tương tự như index.tsx, trước tiên chúng ta phải nhập React để sử dụng JSX.

Lần nhập tiếp theo là từ react-router-dom. Chúng tôi đang nhập Tuyến, đó là cách chúng tôi sẽ khớp URL của ứng dụng với các thành phần mà chúng tôi muốn hiển thị

Sau ReactRouter, tiếp theo, chúng tôi có lần nhập khẩu đầu tiên cho Ionic. Để sử dụng một thành phần trong React, trước tiên bạn phải nhập nó. Vì vậy, đối với Ionic, điều này có nghĩa là bất cứ khi nào chúng ta muốn sử dụng Nút hoặc Thẻ, nó phải được thêm vào mục nhập của chúng ta. Trong trường hợp của thành phần ứng dụng của chúng tôi, chúng tôi chỉ sử dụng IonApp, IonRouterOutletvà IonReactRouter.

IonReactRouterlà một thành phần bao bọc thành phần BrowserRouter của ReactRouter. Nó ít nhiều hoạt động giống như BrowserRouter với một vài điểm khác biệt. Chúng tôi có một hướng dẫn sâu hơn về những khác biệt này trongTài liệu điều hướng phản ứng.

Lần nhập quan trọng cuối cùng là Homenhập linh kiện. Đây là một thành phần mà chúng tôi sẽ có thể điều hướng đến trong ứng dụng của mình. Chúng ta sẽ xem xét phần điều hướng sau một chút.

Nhập CSS đang kéo các kiểu tiện ích từ Ionic cho những thứ như padding, typography, v.v.

Sau khi xem xét tất cả các lần nhập, bây giờ chúng ta có cái nhìn đầu tiên về Thành phần React:

  const App: React.FC = () => (

    <IonApp>

      <IonReactRouter>

        <IonRouterOutlet>

          <Route path="/home" component={Home} exact={true} />

          <Route exact path="/" render={() => <Redirect to="/home" />} />

        </IonRouterOutlet>

      </IonReactRouter>

    </IonApp>

  );

Thành phần React này thiết lập định tuyến ban đầu cho ứng dụng của chúng tôi, cũng như bao gồm một số thành phần Ionic cốt lõi cho hoạt ảnh và bố cục (IonRouterOutlet và IonApp). Một điều nổi bật là trong React, để thực hiện việc ràng buộc dữ liệu, giá trị được chuyển trong dấu ngoặc nhọn ( {}). Vì vậy, trong Routethành phần, chúng ta có thể đặt giá trị của componentcho Homethành phần từ trước đó. Đây là cách React sẽ biết rằng giá trị đó không phải là một chuỗi, mà là một tham chiếu đến một thành phần.

A Component with style

Bây giờ Appthực sự không có nhiều thứ để sửa đổi ở đây. Đây là một ví dụ cơ bản về thành phần vùng chứa. Với bộ logic của Bộ định tuyến, tất cả những gì nó chịu trách nhiệm là hiển thị một thành phần phù hợp với tuyến URL đã cho. Vì chúng ta đã có một thiết lập thành phần / bộ định tuyến, hãy tiếp tục và sửa đổi Homethành phần của chúng ta .

Hiện tại, Homethành phần trông giống như sau:

  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

  import React from 'react';

  

  const Home: React.FC = () => {

    return (

      <IonPage>

        <IonHeader>

          <IonToolbar>

            <IonTitle>Ionic Blank</IonTitle>

          </IonToolbar>

        </IonHeader>

        <IonContent className="ion-padding">

          The world is your oyster.

          <p>

            If you get lost, the{' '}

            <a

              target="_blank"

              rel="noopener"

              href="https://ionicframework.com/docs/"

            >

              docs

            </a>{' '}

            will be your guide.

          </p>

        </IonContent>

      </IonPage>

    );

  };

 Giống như Appthành phần mà chúng tôi đã bắt đầu, chúng tôi có một số nhập khẩu cho các thành phần Ionic cụ thể, nhập khẩu cho React và sau đó là chính thành phần React của chúng tôi.

IonPage là thành phần cơ sở cho tất cả các trang (thành phần có tuyến / URL) và bao gồm một số khối xây dựng chung của thành phần toàn màn hình, như thành phần tiêu đề, tiêu đề và nội dung.

 IonHeaderlà một chút tự giải thích. Đó là một thành phần có nghĩa là tồn tại ở đầu trang. IonHeaderBản thân nó không làm được gì nhiều, ngoài việc xử lý một số bố cục dựa trên flexbox. Nó có nghĩa là để giữ các thành phần khác, như IonToolbarhoặc IonSearchbar.

IonContent, như tên gọi của nó, là khu vực nội dung chính cho trang của chúng tôi. Nó chịu trách nhiệm cung cấp nội dung có thể cuộn mà người dùng sẽ tương tác, cùng với bất kỳ sự kiện cuộn nào có thể được sử dụng trong một ứng dụng.

Nội dung hiện tại của chúng tôi tương đối đơn giản nhưng không chứa bất kỳ thứ gì có thể được sử dụng trong một ứng dụng thực, vì vậy hãy thay đổi điều đó.

  <IonPage>

  ...

  <IonContent>

    <IonList>

      <IonItem>

        <IonCheckbox slot="start" />

        <IonLabel>

          <h1>Create Idea</h1>

          <IonNote>Run Idea by Brandy</IonNote>

        </IonLabel>

        <IonBadge color="success" slot="end">

          5 Days

        </IonBadge>

      </IonItem>

    </IonList>

  </IonContent>

</IonPage>

Ở đây trong của chúng tôi IonContent, chúng tôi đang thêm một IonListvà một IonItemthành phần liên quan nhiều hơn nữa . Hãy nhìn vào IonItem, vì nó là trung tâm ở đây.

 <IonItem>

  <IonCheckbox slot="start" />

  <IonLabel>

    <h1>Create Idea</h1>

    <IonNote>Run Idea by Brandy</IonNote>

  </IonLabel>

  <IonBadge color="success" slot="end">

    5 Days

  </IonBadge>

</IonItem>

Mục rất quan trọng vì nó thể hiện rõ ràng sự kết hợp giữa các khái niệm React và các khái niệm Thành phần Web. Ví dụ rõ ràng đầu tiên về khái niệm React là các thẻ tự đóng cho các Thành phần React trong IonCheckbox. Đây chỉ là một cách đơn giản hơn để viết các thành phần không chứa bất kỳ nội dung con nào.

Từ phía Thành phần Web, chúng ta có một thuộc tính đặc biệt được gọi là slot. Đây là chìa khóa để cho IonItembiết vị trí đặt IonCheckboxkhi nó hiển thị. Đây không phải là API React, mà là API tiêu chuẩn web.

Hãy xem xét một thành phần khác từ Ionic, FAB. Các nút hành động nổi là một cách hay để cung cấp một hành động chính được nâng lên so với phần còn lại của ứng dụng. Đối với FAB này, chúng ta sẽ cần ba thành phần: FAB, Nút FAB và Biểu tượng.

 import { add } from ‘ionicons/icons’;

  …

  

  <IonContent>

    <IonList>

    ...

    </IonList>

  

    <IonFab vertical="bottom" horizontal="end" slot="fixed">

      <IonFabButton>

        <IonIcon icon={add} />

      </IonFabButton>

    </IonFab>

  

  </IonContent>

Trên chính của chúng tôi IonFab, chúng tôi đang thiết lập vị trí của nó với các thuộc tính dọc và ngang. Chúng tôi cũng đang đặt vị trí hiển thị thành "cố định" với thuộc tính vị trí. Điều này sẽ yêu IonFabcầu hiển thị bên ngoài nội dung có thể cuộn trong IonContent.

Bây giờ chúng ta hãy kết nối một trình xử lý nhấp chuột cho điều này. Những gì chúng tôi muốn làm là khi chúng tôi nhấp vào nút, chúng tôi sẽ điều hướng đến một trang mới (trang này chúng tôi sẽ tạo trong giây lát). Để thực hiện việc này, chúng ta cần có quyền truy cập vào API điều hướng của Bộ định tuyến React. Rất may vì điều này được hiển thị trong ngữ cảnh Bộ định tuyến / Tuyến đường, chúng tôi có quyền truy cập vào API bộ định tuyến React thông qua Props được chuyển đến thành phần Home của chúng tôi.

   import { add } from 'ionicons/icons';

...

const Home: React.FC<RouteComponentProps> = (props) => {

  return (

    <IonPage>

      <IonHeader>...</IonHeader>

      <IonContent>

        <IonList>...</IonList>

        <IonFab vertical="bottom" horizontal="end" slot="fixed">

          <IonFabButton onClick={() => props.history.push('/new')}>

            <IonIcon icon={add} />

          </IonFabButton>

        </IonFab>

      </IonContent>

    </IonPage>

  );

}

export default Home;

Trong khai báo thành phần của chúng tôi, chúng tôi đang chuyển vào propsđó là loại RouteComponentProps(được nhập từ react-router). propsĐối tượng này cung cấp cho chúng tôi quyền truy cập vào API lịch sử từ Bộ định tuyến React, cho phép chúng tôi đẩy một tuyến đường mới vào ngăn xếp điều hướng. Trên của chúng tôi IonFabButton, chúng tôi có thể thêm một trình xử lý nhấp chuột, và chỉ cần gọi props.history.pushvà chuyển trong tuyến đường mới. Trong trường hợp này, chúng tôi sẽ điều hướng đến new.

  <IonFabButton onClick={() => props.history.push('/new')} >

Creating a new Router

Bây giờ chúng ta đã có sẵn các phần để điều hướng trong ứng dụng của mình, chúng ta cần tạo một thành phần mới và thêm tuyến đường mới vào khai báo bộ định tuyến của chúng ta. Hãy mở App.tsxtệp của chúng tôi và thêm tuyến đường mới.

  ...

  import Home from './pages/Home';

  

  import NewItem from './pages/NewItem';

  ...

  const App: React.FC = () => {

    const isAuthed = true;

    return (

      <IonApp>

        <IonReactRouter>

          <IonRouterOutlet>

            <Route path="/home" component={Home} />

            <Route path="/new" component={NewItem} />

            <Redirect exact from="/" to="/home" />

          </IonRouterOutlet>

        </IonReactRouter>

      </IonApp>

    );

  }

  export default App;

Với bộ định tuyến của chúng tôi hiện có một mục nhập cho tuyến đường /new, chúng tôi sẽ tạo thành phần cần thiết , NewItem. Điều này sẽ tồn tại trongsrc/pages/NewItem.tsx

Hãy điền vào NewItem.tsxmột số nội dung giữ chỗ cho lúc này.

  import {

    IonBackButton,

    IonButtons,

    IonContent,

    IonHeader,

    IonPage,

    IonTitle,

    IonToolbar

  } from '@ionic/react';

  import React from 'react';

  

  const NewItem: React.FC = () => {

    return (

      <IonPage>

        <IonHeader>

          <IonToolbar>

            <IonButtons slot="start">

              <IonBackButton />

            </IonButtons>

            <IonTitle>New Item</IonTitle>

          </IonToolbar>

        </IonHeader>

        <IonContent></IonContent>

      </IonPage>

    );

  };

  export default NewItem;

Nội dung ở đây khá đơn giản và phải giống với Homethành phần. Thành phần mới là gì IonBackButton. Điều này được sử dụng để điều hướng trở lại tuyến đường trước đó. Khá thẳng tiến? Ok, nhưng nếu chúng ta tải lại trang thì sao?

Trong trường hợp này, lịch sử trong bộ nhớ bị mất nên nút quay lại sẽ biến mất. Để giải quyết vấn đề này, chúng tôi có thể đặt defaultHrefgiá trị thuộc tính thành URL mà chúng tôi muốn điều hướng đến nếu không có lịch sử.

   return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonButtons slot="start">

            <IonBackButton defaultHref="/home" />

          </IonButtons>

          <IonTitle>New Item</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent />

    </IonPage>

  );

Tại đây, khi chúng tôi tải lại, nếu không có lịch sử ứng dụng, chúng tôi sẽ có thể điều hướng trở lại tuyến đường chính của mình.

Build a Native App

Bây giờ chúng ta đã có những kiến ​​thức cơ bản về ứng dụng Ionic React, bao gồm một số thành phần giao diện người dùng và điều hướng. Điều tuyệt vời về các thành phần của Ionic là chúng hoạt động ở mọi nơi, bao gồm iOS, Android và PWA. Để triển khai cho thiết bị di động, máy tính để bàn và hơn thế nữa, chúng tôi sử dụng thời gian chạy ứng dụng đa nền tảng của Ionic . Nó cung cấp một tập hợp các API nhất quán, tập trung vào web cho phép ứng dụng bám sát các tiêu chuẩn web nhất có thể trong khi truy cập các tính năng phong phú của thiết bị gốc trên các nền tảng hỗ trợ chúng.

Thêm chức năng gốc rất dễ dàng. Đầu tiên, thêm Tụ điện vào dự án của bạn:

  ionic integrations enable capacitor

Tiếp theo, xây dựng dự án, sau đó thêm nền tảng bạn chọn

  ionic build

  ionic cap add ios

  ionic cap add android

Chúng tôi sử dụng các IDE gốc tiêu chuẩn (Xcode và Android Studio) để mở, xây dựng và chạy các dự án iOS và Android:

  ionic cap open ios

  ionic cap open android

Chi tiết bổ sung có thể được tìm thấy ở đây .

Tiếp theo, hãy kiểm tra tất cả các API có sẵn. Có một số thứ tuyệt vời, bao gồm cả API Camera . Chúng tôi có thể triển khai chức năng chụp ảnh chỉ trong một vài dòng mã:

   import { IonContent, IonHeader, IonPage, IonTitle, 

    IonToolbar, IonButton } from '@ionic/react';

import React, { useState } from 'react';

import { Plugins, CameraResultType } from '@capacitor/core';

const Home: React.FC = () => {

const { Camera } = Plugins;

const [photo, setPhoto] = useState();

const takePhoto = async () => {

const image = await Camera.getPhoto({

 quality: 90,

 allowEditing: true,

 resultType: CameraResultType.Uri

});

setPhoto(image.webPath);

};

return (

<IonPage>

 <IonHeader>

   <IonToolbar>

     <IonTitle>Ionic Blank</IonTitle>

   </IonToolbar>

 </IonHeader>

 <IonContent className="ion-padding">

   <img src={photo} />

   <IonButton onClick={takePhoto}>Take Photo</IonButton>

 </IonContent>

</IonPage>

);

};

export default Home;