はじめに

NativeScript(NativeScript-Vue) で ActionBar/ActionItemFontAwesome などのアイコンフォントを使用する方法。

TL;DR

  • ActionBar:
    • title プロパティは使わない
    • 下層に XxxxLayoutLabel 定義
  • ActionItem:
    • ios.systemIcon, android.systemIcon は使わない
    • 下層に Label で定義
続きを読む

はじめに

NativeScript(NativeScript-Vue) での border の使い方を整理した。

TL;DR

  • border-width, border-color, border-radius で指定
    • width, colorborder-[top|right|bottom|left]-xxxx で個別指定も可能
    • border-width: 1 2 3 4; のような指定も可能
  • CSS のショートハンド(border: 1px black solid;)は使えないので注意
続きを読む

はじめに

NativeScript(NativeScript-Vue) で adamwdraper/Numeral を使って、toLocaleString を実現する方法。

TL;DR

続きを読む

はじめに

NativeScript(NativeScript-Vue) でアイコンフォント(FontAwesome)付きのボトムタブバーを表示する方法。

TL;DR

  • BottomNavigation を使う
    • Android, iOS ともに問題なし
    • NativeScript-Vue でアイコンとテキストを同時に表示する場合は <Image src.decode />
  • TabView
    • Android は問題ないが、iOS でアイコンフォントが表示されない
続きを読む

はじめに

NativeScript(NativeScript-Vue) で FontAwesome などのアイコンフォントを使用する方法。

TL;DR

  • 基本は 公式ガイド: Icon Fonts 通り
  • .ttfapp/fonts に配置
  • app.css(app.scss) に font-family, font-weight の記述を追加
    • font-family: iOS/Android 両対応の場合はフォント名とファイル名で定義
  • unicode でアイコン表示
    • mixin 作っておくと便利になる
続きを読む

はじめに

NativeScript の StackLayout などでスクロールを有効にする方法。

※何もしないと、画面外に要素がはみ出してもスクロールできない。

TL;DR

  • ScrollView を使う
    • orientation="horizontal"で 水平方向
    • orientation="vertical"で 垂直方向(デフォルト)
続きを読む

はじめに

NativeScript の API Client のサンプル。

axios/axiosNativeScript/nativescript-background-http とを使って実装。

あくまでも一例なので、各自の環境に合わせて適宜修正。

※試してないが 、今からなら klippa-app/nativescript-http を使うのが良いかもしれない。(最近(2020/03/22 以降) リリースされているので、API Client 作った時には無かった)

TL;DR

続きを読む

はじめに

NativeScript(NatvieScript-vue) で、非 SSL サイトへのリクエストを許可する方法。

TL;DR

  • Android: AndroidManifest.xmlusesCleartextTraffic の設定追加
  • iOS: Info.plistNSAllowsArbitraryLoads の設定追加
  • よりセキュアな方法もあるので、各自の状況や環境に合わせて要設定
続きを読む

はじめに

NativeScript(NatvieScript-vue) で JsBarcode を使ってバーコードを 生成/描画 する方法。

通常通りの使い方ではエラーとなるため、少しトリッキーな方法を用いている。

なお、有料で良ければ @proplugins/nativescript-zxing を使うのが早いと思われる。

TL;DR

続きを読む

はじめに

axios でリクエストした際に unable to verify the first certificate となる場合の対応方法。

自己生成証明書(オレオレ証明書)を利用している環境などで発生すると思われる。ちゃんとした証明書であれば問題ないはずなので、あくまでも暫定的な対応方法。

TL;DR

続きを読む

r17n


Softwear Engineer


Fukuoka