はじめに
NativeScript(NativeScript-Vue) で iOS の Status Bar の情報(時刻、電池量など)が表示されない場合の対応方法。
TL;DR
app/App_Resources/iOS/Info.plistでUIViewControllerBasedStatusBarAppearanceをfalseに設定
NativeScript(NativeScript-Vue) で iOS の Status Bar の情報(時刻、電池量など)が表示されない場合の対応方法。
app/App_Resources/iOS/Info.plist で UIViewControllerBasedStatusBarAppearance を false に設定NativeScript(NativeScript-Vue)で Dark Mode(iOS), Dark Theme(Android) に対応する方法。
forceDarkAllowed で Dark Theme のサポート有無を設定UIUserInterfaceStyle で Dark Mode を非サポートに設定可能(デフォルトで影響を受ける).ns-dark, Light だと .ns-light が root-view に適用される@nativescript/theme を使って Theme.setMode(Theme.Light) で強制変更もできるNativeScript(NativeScript-Vue) の Application Lifecycle について。
アプリの起動や終了、バックグラウンドへの移動などを検出して処理させることができる。
application.on(<event>, <handler>) でイベント検出・ハンドラの設定new Vue().$start() を実行していれば application.run は実行不要NativeScript-Vue でページ読み込み後にページ移動やダイアログの表示をする方法。
アプリ起動直後のページ(xxxx.vue) 内の created や mounted で、$navigateTo や $showModal を使っても期待通りに動作しない場合の対応方法。
<Page @loaded="onLoaded"> のように NativeScript 側の loaded イベントを使う$showModal)は loaded + setTimeout で対応NativeScript(NativeScript-Vue) で ActionBar/ActionItem に FontAwesome などのアイコンフォントを使用する方法。
ActionBar:title プロパティは使わないXxxxLayout と Label 定義ActionItem:ios.systemIcon, android.systemIcon は使わないLabel で定義NativeScript(NativeScript-Vue) での border の使い方を整理した。
border-width, border-color, border-radius で指定width, color は border-[top|right|bottom|left]-xxxx で個別指定も可能border-width: 1 2 3 4; のような指定も可能border: 1px black solid;)は使えないので注意NativeScript(NativeScript-Vue) で adamwdraper/Numeral を使って、toLocaleString を実現する方法。
toLocaleString は未対応(2020/05/09 現在)
numeral(val).format('')NativeScript(NativeScript-Vue) でアイコンフォント(FontAwesome)付きのボトムタブバーを表示する方法。
BottomNavigation を使う<Image src.decode />TabViewNativeScript(NativeScript-Vue) で FontAwesome などのアイコンフォントを使用する方法。
.ttf を app/fonts に配置app.css(app.scss) に font-family, font-weight の記述を追加font-family: iOS/Android 両対応の場合はフォント名とファイル名で定義NativeScript の StackLayout などでスクロールを有効にする方法。
※何もしないと、画面外に要素がはみ出してもスクロールできない。
ScrollView を使うorientation="horizontal"で 水平方向orientation="vertical"で 垂直方向(デフォルト)