はじめに
NativeScript(NativeScript-Vue) でアニメーションの利用方法。
TL;DR
- CSS アニメーション、コードでのアニメーションがある
- 公式ドキュメントが充実しているので読む
- CSS のショートハンドで上手く動かない場合は、各プロパティに分解してみると良いかも
NativeScript(NativeScript-Vue) でアニメーションの利用方法。
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 両対応の場合はフォント名とファイル名で定義