< NativeScript

NativeScript - template-hello-world-ts

Szerző: Sallai András

Copyright © Sallai András, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Indulás

ns create HelloWorld --template @nativescript/template-hello-world-ts

Könyvtárszerkezet

app01/
|-app/
| |-app-root.xml
| |-app.css
| |-app.ts
| |-main-pages.ts
| |-main-pages.xml
| `-man-view-model.ts
|-App_Resources/
|-hooks/
|-node_modules/
|-platforms/
|-.editorconfig
|-.gitignore
|-nativescript.config.ts
|-package-lock.json
|-package.json
|-references.d.ts
|-tsconfig.json
`-webpack.config.js

A főlap

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"> <ActionBar title="My App" icon="" /> <StackLayout class="p-20"> <Label text="Tap the button" class="h1 text-center" /> <Button text="TAP" tap="{{ onTap }}" class="-primary" /> <Label text="{{ message }}" class="h2 text-center" textWrap="true" /> </StackLayout> </Page>
import { EventData, Page } from '@nativescript/core' import { HelloWorldModel } from './main-view-model' export function navigatingTo(args: EventData) { const page = <Page>args.object page.bindingContext = new HelloWorldModel() }
import { Observable } from '@nativescript/core' export class HelloWorldModel extends Observable { private _counter: number private _message: string constructor() { super() // Initialize default values. this._counter = 42 this.updateMessage() } get message(): string { return this._message } set message(value: string) { if (this._message !== value) { this._message = value this.notifyPropertyChange('message', value) } } onTap() { this._counter-- this.updateMessage() } private updateMessage() { if (this._counter <= 0) { this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!' } else { this.message = `${this._counter} taps left` } } }