Всплывающие уведомления в приложениях NativeScript Angular 2

Разработка /
Разработка: Всплывающие оповещения в приложениях NativeScript Angular 2

Сегодня мы познакомимся как создавать всплывающие уведомления (Toast notifications) в NativeScript для и , построенных с 2.

На картинке выше вы можете увидеть результат нашей задачи.

Создадим простое приложение с одной кнопкой, при нажатии которой будет показано всплывающее уведомление и на iOS и в Android. Эти нотификации очень удобны для показа информации без прерывания работы пользователя с приложением.

Создаём проект NativeScript


В консоли поочерёдно выполните следующие команды:

tns create ToastProject --ng
cd ToastProject
tns platform add ios
tns platform add android

Параметр --ng укажет скрипту на создание приложения Angular на TypeScript. Также не забывайте, что без Mac с установленным Xcode, у вас не получится собрать приложение для iOS.

Ранее для создания всплывающих уведомлений требовалась работа напрямую с Android API. Но сейчас можно упростить этот процесс с помощью плагина и вдобавок получить возможность работы этих нотификаций в iOS.

Выполните следующую команду в консоли:

tns plugin add nativescript-toast

Теперь приступим непосредственно к разработке приложения.

Создание логики приложения и разметки XML


Это приложение будет состоять только из одной страницы. Мы начнём с добавления кода на TypeScript и затем построим простенький UI (пользовательский интерфейс).

Откроем файл app/app.component.ts в любимом редакторе и добавим в него такой код:

import { Component } from "@angular/core";
import * as Toast from "nativescript-toast";
 
@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
 
    public showToast(message: string) {
        Toast.makeText(message).show();
    }
 
}

Здесь мы импортируем плагин, установленный ранее. С помощью функции мы можем показать всплывающее уведомление и так как функция публичная, мы можем вызвать её из UI.

Откроем файл app/app.component.html и вставим следующие строки:

<ActionBar title="{N} Toast Example"></ActionBar>
<StackLayout horizontalAlignment="center" verticalAlignment="center">
    <Button text="Display" (tap)="showToast('Example by Nic Raboy')" class="btn btn-primary"></Button>
</StackLayout>

В этом UI нет панели с названием приложения. Единственная кнопка расположена в центре экрана, она вызывает метод showToast при нажатии.

Nic Raboy: Display Toast Notifications In A NativeScript Angular Application
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.