はじめに

NativeScript(NativeScript-Vue) でアイコンフォント(FontAwesome)付きのボトムタブバーを表示する方法。

TL;DR

  • BottomNavigation を使う
    • Android, iOS ともに問題なし
    • NativeScript-Vue でアイコンとテキストを同時に表示する場合は <Image src.decode />
  • TabView
    • Android は問題ないが、iOS でアイコンフォントが表示されない
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 前置き
    2. TabView を使った場合
    3. BottomNavigation を使った場合
      1. アイコンフォントとテキストを同時に表示
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

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 の利用方法は以下参照。

ボトムタブバー については以下参照。

TabView を使った場合

TabView だと、iOS ではうまく表示できない。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <Page>
    <TabView
      :selectedIndex="selectedIndex"
      @selectedIndexChange="onIndexChange"
      androidTabsPosition="bottom"
    >
      <TabViewItem :title="get_fa_text('fa-home')" class="fas">
        <Label text="Tab 1"/>
      </TabViewItem>
      <TabViewItem :title="get_fa_text('fa-history')" class="fas">
        <Label text="Tab 2"/>
      </TabViewItem>
    </TabView>
  </Page>
</template>

Android(emulator)

iOS(simulator)

BottomNavigation を使った場合

BottomNavigation だと、Android, iOS ともにアイコンフォントが表示できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <Page>
    <BottomNavigation :selectedIndex="selectedIndex" @selectedIndexChanged="onIndexChange">
      <!-- ボトムタブ部分 -->
      <TabStrip>
        <TabStripItem :title="get_fa_text('fa-home')" class="fas"/>
        <TabStripItem :title="get_fa_text('fa-history')" class="fas"/>
      </TabStrip>

      <!-- タブごとのコンテンツ -->
      <TabContentItem>
        <Label text="Tab 1"/>
      </TabContentItem>
      <TabContentItem>
        <Label text="Tab 2"/>
      </TabContentItem>
    </BottomNavigation>
  </Page>
</template>

Android(emulator)

iOS(simulator)

アイコンフォントとテキストを同時に表示

NativeScipt 側ドキュメントを読むと、以下のような記述となっている。

1
2
3
4
5
6
7
8
9
10
11
12
13
<BottomNavigation selectedIndex="1">
  <TabStrip>
    <!-- Label と Image の例 -->
    <TabStripItem>
      <Label text="Home" />
      <Image src="font://&#xf015;" class="fas" />
    </TabStripItem>

    <!-- title と iconSource の例 -->
    <TabStripItem title="Search" iconSource="font://&#xf00e;" />
  </TabStrip>
  ...
</BottomNavigation>

素の NativeScript であれば上記で問題ないようだが、NativeScript-Vue の場合は以下のように <Image src.decode /> で記述しなければアイコンフォントの表示が上手くいかないので注意。
参考:

1
2
3
4
5
6
7
8
9
<BottomNavigation selectedIndex="1">
  <TabStrip>
    <TabStripItem>
      <Label text="Home" />
      <Image src.decode="font://&#xf015;" class="fas" />
    </TabStripItem>
  </TabStrip>
  ...
</BottomNavigation>

また、残念なことに src:decode が v-bind に非対応のため :src.decode="`font://&#x${icon_font_code}`" のような記述もできない。

なお選択中タブのスタイルは TabStripItem:active で変更可能。
参考: Styling - BottomNavigation - NativeScript Docs

1
2
3
4
5
6
7
8
9
10
<style scoped lang="scss">
TabStripItem:active {
  Label {
    color: skyblue;
  }
  Image {
    color: skyblue;
  }
}
</style>

まとめ

  • BottomNavigation を使う
    • Android, iOS ともに問題なし
    • NativeScript-Vue でアイコンとテキストを同時に表示する場合は <Image src.decode />
  • TabView
    • Android は問題ないが、iOS でアイコンフォントが表示されない

その他・メモ

後述の公式ドキュメント、StackOverflow などのサイトを見て回ったが、TabView でアイコンフォントを表示する方法を見つけきれなかった。

(自分が見つけられていないだけで、TabView でもうまく表示する方法はあるかもしれない。)

参考文献

関連記事

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