はじめに

NativeScript(NativeScript-Vue) で NativeScript/nativescript-datetimepicker を使って、Locale を意識した DatePicker/TimePicker

TL;DR

  • tns plugin add nativescript-datetimepicker でインストール
  • NativeScript-Vue は Vue.use(DateTimePicker) で準備
  • <DatePickerField locale="ja_JP" /> で日本向けの日付選択
  • その他プロパティは Features を参照
続きを読む

はじめに

NativeScript(NativeScript-Vue) でアニメーションの利用方法。

TL;DR

続きを読む

はじめに

NativeScript(NativeScript-Vue) で iOS の Status Bar の情報(時刻、電池量など)が表示されない場合の対応方法。

TL;DR

  • app/App_Resources/iOS/Info.plistUIViewControllerBasedStatusBarAppearancefalse に設定
続きを読む

はじめに

NativeScript(NativeScript-Vue)で Dark Mode(iOS), Dark Theme(Android) に対応する方法。

TL;DR

  • Android: forceDarkAllowed で Dark Theme のサポート有無を設定
  • iOS: UIUserInterfaceStyle で Dark Mode を非サポートに設定可能(デフォルトで影響を受ける)
  • Dark Mode/Theme だと .ns-dark, Light だと .ns-lightroot-view に適用される
  • @nativescript/theme を使って Theme.setMode(Theme.Light) で強制変更もできる
続きを読む

はじめに

NativeScript(NativeScript-Vue) の Application Lifecycle について。

アプリの起動や終了、バックグラウンドへの移動などを検出して処理させることができる。

TL;DR

続きを読む

はじめに

NativeScript-Vue でページ読み込み後にページ移動やダイアログの表示をする方法。

アプリ起動直後のページ(xxxx.vue) 内の createdmounted で、$navigateTo$showModal を使っても期待通りに動作しない場合の対応方法。

TL;DR

続きを読む

はじめに

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 でアイコンフォントが表示されない
続きを読む

r17n


Softwear Engineer


Fukuoka