Для NativeScript доступно все больше плагинов, разработанных сообществом, и причина этого не только в желании и чувстве вклада разработчиков, но и в простоте разработки плагина для NativeScript , особенно после версии 3.0.
В этой статье я продемонстрирую, как я разработал NativeScript Emoji, мой первый плагин пользовательского интерфейса для NativeScript. К концу этой статьи, я надеюсь, вы заинтересуетесь своим интересом к разработке плагина и участию в сообществе разработчиков NativeScript, когда это произойдет, выигрывают все!
С чего начать?
Я продемонстрирую основы, которые вам нужно знать, чтобы начать работу, но, если вы предпочитаете, полную документацию можно найти здесь.
Самый простой способ получить плагин для NativeScript - использовать Seed плагина NativeScript, созданный NathanWalker. Эта библиотека сделает всю тяжелую работу по созданию структуры плагина NativeScript, и это действительно потрясающе. Посмотрите, как это просто:
1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin 2. cd myplugin 3. npm run postclone 4. npm run setup
Теперь, выполнив только эти шаги, вы создадите всю необходимую структуру для разработки, тестирования и публикации вашего плагина, но прежде чем вы начнете, давайте кратко расскажем о плагине, который мы собираемся разработать вместе в этой статье.
Плагин NativeScript Emoji
Цель этого плагина - предоставить элемент интерфейса для удобного отображения эмодзи. Моя первоначальная идея заключалась в том, чтобы иметь элемент TextView. При установке юникода или шестнадцатеричного значения эмодзи в соответствующем свойстве:
‹Emoji: Emoji icon =” 128514 '›display: 😂
Плагин выполняет преобразование в Emoji, и здесь я снова оставляю выделение для сообщества NativeScript в Slack (еще не присоединились к нам? Зарегистрируйтесь сейчас), которое сделало отличное предложение заменить свойство unicode на более дружелюбное. и более легкое для запоминания значение:
‹Emoji: Emoji name =” joy ”› display: 😂
Реализация для Android и iOS
Теперь, когда у нас уже есть определение плагина и созданная структура, приступим. Первое, что нам нужно сделать, это определить общую реализацию для разных платформ, мы знаем, что у нас будет свойство name, которое будет обслуживать как Android, так и iOS, этот параметр задается в общем файле, который был сгенерирован. в первом шаге этой статьи.
emoji.common.ts
import { View, Property } from "ui/core/view";
export class EmojiCommon extends View {
name: string;
}
export const nameProperty = new Property<EmojiCommon, string>(
{
name: "name",
defaultValue: ""
});
nameProperty.register(EmojiCommon);
Поскольку это плагин пользовательского интерфейса, нам необходимо расширить класс View. Атрибуты элемента, который мы будем создавать, мы определяем, создавая новый объект типа Свойство.
В свойстве name мы определяем имя атрибута и его значение по умолчанию, как следует из самого названия, мы определяем свойство defaultValue. Если бы значение этого атрибута отличалось от типа string, что не в нашем случае, нам нужно было бы установить значение для свойства valueConverter.
Кодировка эмодзи различна для каждой платформы, поэтому нам нужна база данных для хранения этих значений для запроса во время выполнения плагина.
export class EmojiDatabase {
public static list(): Array<any> {
return [
{
"name": "FACE WITH TEARS OF JOY",
"unicode": "😂",
"hexcode": "1F602",
"codepoint": [
128514
],
"shortname": "joy"
}];
}
Реализация для Android
Теперь, когда у нас есть атрибуты элемента, который мы создадим, нам нужно реализовать код, отвечающий за создание элемента, соответствующего каждой платформе. NativeScript будет интерпретировать конкретный код для Android во время выполнения через следующий файл.
emoji.android.ts
import { nameProperty, EmojiCommon } from "./emoji.common";
import { EmojiDatabase } from "./emoji.database";
import * as utils from "tns-core-modules/utils/utils";
declare var java: any;
global.moduleMerge(EmojiCommon, exports);
export class Emoji extends EmojiCommon {
[nameProperty.getDefault](): string {
return '';
}
[nameProperty.setNative](value: string) {
let emoji = EmojiDatabase.list().find((el) => el.shortname === value).codepoint[0];
this.nativeView.setText(new java.lang.String(java.lang.Character.toChars(emoji)));
}
private _android: android.widget.TextView;
get android() {
return this.nativeView;
}
public createNativeView() {
this._android = new android.widget.TextView(utils.ad.getApplicationContext());
return this._android;
}
}
Первый шаг - расширить ранее созданный общий класс. Вы также должны реализовать метод createNativeView, который заставит NativeScript понять, что какой-то элемент должен быть создан в представлении. В нашем случае мы создадим TextView.
И снова здесь у нас есть еще одна большая помощь от фреймворка: команда NativeScript сопоставила все собственные свойства и методы каждой платформы и сгенерировала определения в TypeScript, что дает нам возможность перемещаться по всем этим собственным определениям прямо в редакторе.
Мы также должны определить, что будет делать плагин, когда он получит атрибут name, это определяется путем реализации метода setNative, который в нашем случае будет запрашивать имя эмодзи в database, и на основе соответствующего кода он установит значение для ранее созданного TextView. Метод getDefault предназначен для случаев, когда значение не задано.
реализация iOS
Мы можем скопировать ту же реализацию, что и для Android, и изменить только те части, в которых она создана, и установить значение для нативного элемента, которым в случае iOS будет настройка UILabel, как показано ниже.
emoji.ios.ts
import { nameProperty, EmojiCommon } from "./emoji.common";
import { EmojiDatabase } from "./emoji.database";
global.moduleMerge(EmojiCommon, exports);
export class Emoji extends EmojiCommon {
[nameProperty.getDefault](): number {
return 0;
}
[nameProperty.setNative](value: string) {
let emoji = EmojiDatabase.list().find((el) => el.shortname === value).unicode;
let nsString = NSString.stringWithString(emoji);
this.nativeView.text = nsString;
}
private _ios: UILabel;
get ios() {
return this.nativeView;
}
public createNativeView() {
this._ios = UILabel.alloc().init();
return this._ios;
}
}
Здесь снова можно будет получить доступ к определению собственных методов для iOS, в методе createNativeView создается UILabel, а в методе setNative значение для созданного элемента. определено.
Тестирование
Да, мы закончили реализацию плагина, осталось только тестирование. Действительно быстро, не правда ли? Для тестирования нам нужно добавить плагин в демонстрационный проект, созданный на начальных этапах этой статьи. Для этого необходимо выполнить команду:
npm run preparedemo
Добавьте ссылку на элемент в элемент Page файла main-page.xml.
xmlns:Emoji=”nativescript-emoji”
А затем добавьте элемент в StackLayout
<Emoji:Emoji name=”joy” />
Заявив следующее:
main-page.xml
<Page xmlns=”https://schemas.nativescript.org/tns.xsd" xmlns:Emoji=”nativescript-emoji” navigatingTo=”navigatingTo” class=”page”> <Page.actionBar> <ActionBar title=”NativeScript Emoji” icon=”” class=”action-bar”> </ActionBar> </Page.actionBar> <StackLayout orientation=”horizontal”> <Label text=”I’m happy “> </Label> <Emoji:Emoji name=”joy” /> <Emoji:Emoji name=”joy” /> <Emoji:Emoji name=”joy” /> </StackLayout> </Page>
Теперь давайте запустим демонстрационный проект на эмуляторах каждой платформы, выполнив следующие команды.
nmm run demo.ios npm run demo.android
Заключение
Надеюсь, вы видите, насколько быстро и легко разработать плагин для NativeScript, сообщество также очень открыто для помощи, а также команда Telerik, которая стремится предоставлять с каждой версией инструменты, это видение делает нашу работу в качестве разработчика намного Более продуктивно, и я приглашаю вас, разработчика, который читает эту статью, вы разработали что-то индивидуальное для какого-либо проекта? У вас есть идеи по поводу инструментов, которые могут быть полезны? Делайте вклад и с нами.
