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 などのアイコンフォントを使用する方法。
.ttf を app/fonts に配置app.css(app.scss) に font-family, font-weight の記述を追加font-family: iOS/Android 両対応の場合はフォント名とファイル名で定義NativeScript(NatvieScript-vue) で JsBarcode を使ってバーコードを 生成/描画 する方法。
通常通りの使い方ではエラーとなるため、少しトリッキーな方法を用いている。
なお、有料で良ければ @proplugins/nativescript-zxing を使うのが早いと思われる。
Object を渡す方法でコードを生成StackLayout を orientation="horizontal" で利用Label で処理backgroundColor で黒塗りつぶしaxios でリクエストした際に unable to verify the first certificate となる場合の対応方法。
自己生成証明書(オレオレ証明書)を利用している環境などで発生すると思われる。ちゃんとした証明書であれば問題ないはずなので、あくまでも暫定的な対応方法。
httpsAgent に rejectUnauthorized: true で生成したエージェントを指定Node.js, express, axios で JWT(JSON Web Tokens) を利用する方法を整理した。
ざっくり以下の流れ。
sign() で JWT 発行config に { headers: { Authorization: `Bearer ${token}` } } で設定verify() で JWT 検証app.use() で JWT 検証処理を定義
