フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

NativeScript 動作検証

はじめに

  • 前回、nativescriptの環境を構築したので、実機での動作確認する方法を確認する

実行確認方法

  • 作成したプロジェクト内でtns preview --bundleのコマンドを実行する
$ cd my-app
$ tns preview --bundle

QRコードを読み込む

検証用に利用したコード

<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="&#xf135; "/>
                    <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>

実機で確認

f:id:PX-WING:20210101074007p:plain