はじめに
NativeScript(NativeScript-Vue) で ActionBar/ActionItem に FontAwesome などのアイコンフォントを使用する方法。
TL;DR
ActionBar:titleプロパティは使わない- 下層に
XxxxLayoutとLabel定義
ActionItem:ios.systemIcon,android.systemIconは使わない- 下層に
Labelで定義
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"で 垂直方向(デフォルト)NativeScript の API Client のサンプル。
axios/axios と NativeScript/nativescript-background-http とを使って実装。
あくまでも一例なので、各自の環境に合わせて適宜修正。
※試してないが 、今からなら klippa-app/nativescript-http を使うのが良いかもしれない。(最近(2020/03/22 以降) リリースされているので、API Client 作った時には無かった)
config を与える場合は、それぞれの仕様に合わせて設定NativeScript(NatvieScript-vue) で、非 SSL サイトへのリクエストを許可する方法。
AndroidManifest.xml に usesCleartextTraffic の設定追加Info.plist に NSAllowsArbitraryLoads の設定追加NativeScript(NatvieScript-vue) で JsBarcode を使ってバーコードを 生成/描画 する方法。
通常通りの使い方ではエラーとなるため、少しトリッキーな方法を用いている。
なお、有料で良ければ @proplugins/nativescript-zxing を使うのが早いと思われる。
Object を渡す方法でコードを生成StackLayout を orientation="horizontal" で利用Label で処理backgroundColor で黒塗りつぶしaxios でリクエストした際に unable to verify the first certificate となる場合の対応方法。
自己生成証明書(オレオレ証明書)を利用している環境などで発生すると思われる。ちゃんとした証明書であれば問題ないはずなので、あくまでも暫定的な対応方法。
httpsAgent に rejectUnauthorized: true で生成したエージェントを指定