NativeScript — это платформа с открытым исходным кодом, которая позволяет разрабатывать мобильные приложения с использованием JavaScript или TypeScript. Он позволяет создавать нативные мобильные приложения для платформ Android и iOS, используя единую кодовую базу. В этой статье мы рассмотрим основы NativeScript и создадим простое мобильное приложение.

Предпосылки

Прежде чем мы начнем, убедитесь, что на вашем компьютере установлено следующее программное обеспечение:

  • Node.js
  • Интерфейс командной строки NativeScript

Вы можете установить интерфейс командной строки NativeScript, выполнив следующую команду:

npm install -g nativescript

Создание нового приложения NativeScript

Чтобы создать новое приложение NativeScript, выполните следующую команду:

tns create my-app-name --template tns-template-blank

Это создаст новое приложение NativeScript с именем «my-app-name» и шаблоном «tns-template-blank». Пустой шаблон обеспечивает минимальную структуру проекта и является хорошей отправной точкой для создания нового приложения.

Запуск приложения

Чтобы запустить приложение на устройстве Android или iOS, подключите свое устройство к компьютеру и выполните следующую команду:

tns run android

or

tns run ios

Это создаст приложение и развернет его на вашем устройстве. Если у вас нет устройства, вы также можете запустить приложение в эмуляторе, выполнив следующую команду:

tns run android --emulator

or

tns run ios --emulator

Создание компонента

В NativeScript вы создаете компоненты, используя XML-разметку и код JavaScript или TypeScript. Давайте создадим простой компонент, который отображает «Hello, World!» сообщение. Создайте новый файл с именем «hello.component.ts» в папке «app» и добавьте следующий код:

import { Component } from "@angular/core";

@Component({
  selector: "app-hello",
  template: "<Label text='Hello, World!'></Label>"
})
export class HelloComponent {}

Этот компонент импортирует декоратор Angular «Component» и определяет новый компонент под названием «HelloComponent». Селектор компонентов установлен на «app-hello», а шаблон отображает «Ярлык» с текстом «Hello, World!».

Использование компонента

Чтобы использовать «HelloComponent» в нашем приложении, нам нужно добавить его к основному компоненту. Откройте файл «app.component.ts» и добавьте следующий код:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: "<app-hello></app-hello>"
})
export class AppComponent {}

Этот компонент импортирует декоратор Angular «Component» и определяет новый компонент под названием «AppComponent». Для селектора компонентов установлено значение «app-root», а в шаблоне отображается «HelloComponent».

Заключение

NativeScript — это мощная платформа для разработки мобильных приложений с использованием JavaScript или TypeScript. В этой статье мы рассмотрели основы создания нового приложения NativeScript, создания нового компонента и использования компонента в нашем приложении. Это должно дать вам хорошую отправную точку для создания собственных приложений NativeScript.

if(youLikeMyContent){
  pleaseConsiderFollowingMe(😊);
}