はじめに

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

TL;DR

  • BottomNavigation を使う
    • Android, iOS ともに問題なし
  • TabView
    • Android は問題ないが、iOS でアイコンフォントが表示されない

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 前置き
    2. TabView を使った場合
    3. BottomNavigation を使った場合
  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)

まとめ

  • BottomNavigation を使う
    • Android, iOS ともに問題なし
  • TabView
    • Android は問題ないが、iOS でアイコンフォントが表示されない

その他・メモ

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

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

参考文献

関連記事