はじめに

NativeScript(NativeScript-Vue) で ActionBar/ActionItem に FontAwesome などのアイコンフォントを使用する方法。

TL;DR

  • ActionBar:
    • title プロパティは使わない
    • 下層に XxxxLayout と Label 定義
  • ActionItem:
    • ios.systemIcon, android.systemIcon は使わない
    • 下層に Label で定義
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. title 部分
    2. ActionItem 部分
    3. 最終形
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.4
BuildVersion:	19E287

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tns --version
6.4.0

$ grep -C1 version package.json
"tns-android": {
  "version": "6.0.0"
},
"tns-ios": {
  "version": "6.4.2"
}

$ tns plugin
Dependencies:
┌──────────────────────────────┬─────────┐
│ Plugin                       │ Version │
│ @nativescript/theme          │ ^2.2.1  │
│ @vue/devtools                │ ^5.0.6  │
│ nativescript-socketio        │ ^3.2.1  │
│ nativescript-toasty          │ ^1.3.0  │
│ nativescript-vue             │ ^2.4.0  │
│ nativescript-vue-devtools    │ ^1.2.0  │
│ tns-core-modules             │ ^6.0.0  │
└──────────────────────────────┴─────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

FontAwesome(アイコンフォント) の使用方法は下記を参照。

title 部分

参考: Custom Title View - ActionBar

ActionBar のタイトル部分にアイコンフォントを表示したい場合は、title プロパティは使わずに下層に XxxxLayout と Label を組み合わせる。

1
2
<!-- NG -->
<ActionBar :title="'My Header ' + get_fa_text('fa-dog')" class="fas"/>
1
2
3
4
5
6
<!-- OK -->
<ActionBar>
  <StackLayout>
    <Label :text="'My Header ' + get_fa_text('fa-dog')" class="fas" />
  </StackLayout>
</ActionBar>

ActionItem 部分

参考: FontIcon not working in ActionItem · Issue #1483 · NativeScript/nativescript-angular

ActionItem でアイコンフォントを表示したい場合は、ios.systemIcon, android.systemIcon を設定せずに、下層に Label で定義する。

1
2
3
4
5
6
7
8
<ActionBar title="My Header">
  <ActionItem
    ios.position="right"
    android.position="actionBar"
  >
    <Label :text="get_fa_text('fa-paw')" class="fas" />
  </ActionItem>
</ActionBar>

最終形

前述の2つを組み合わせると下記のようになる

1
2
3
4
5
6
7
8
9
10
11
<ActionBar>
  <StackLayout>
    <Label :text="'My Header ' + get_fa_text('fa-dog')" class="fas" />
  </StackLayout>
  <ActionItem
    ios.position="right"
    android.position="actionBar"
  >
    <Label :text="get_fa_text('fa-paw')" class="fas" />
  </ActionItem>
</ActionBar>

iOS(Simulator)

Android(Emulator)

まとめ

  • ActionBar:
    • title プロパティは使わない
    • 下層に XxxxLayout と Label 定義
  • ActionItem:
    • ios.systemIcon, android.systemIcon は使わない
    • 下層に Label で定義

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list