はじめに
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 />
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"
で 垂直方向(デフォルト)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
で生成したエージェントを指定