はじめに
- 前回、nativescriptの環境を構築したので、実機での動作確認する方法を確認する
実行確認方法
- 作成したプロジェクト内で
tns preview --bundle
のコマンドを実行する
$ cd my-app
$ tns preview --bundle
検証用に利用したコード
<template>
<Page>
<ActionBar>
<Label text="Home"/>
</ActionBar>
<GridLayout columns="200, 200" rows="200, 200">
<Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
<Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
<Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
<Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
<Button text="Tap Me" @tap="onButtonTap" col="0" row="2"/>
<Label class="info" col="0" row="0">
<FormattedString>
<Span class="fas" text.decode=" "/>
<Span :text="message"/>
</FormattedString>
</Label>
</GridLayout>
</Page>
</template>
<script>
export default {
computed: {
message() {
return "Blank {N}-Vue app2";
}
},
methods: {
onButtonTap() {
console.log("You tapped the button!");
}
}
};
</script>
<style scoped lang="scss">
@import '~@nativescript/theme/scss/variables/blue';
// Custom styles
.fas {
@include colorize($color: accent);
}
.info {
font-size: 20;
horizontal-align: center;
vertical-align: center;
}
</style>
実機で確認