はじめに
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 />
TabView
NativeScript(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"
で 垂直方向(デフォルト)