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(😊); }