はじめに

NativeScript でアクションバーのカスタマイズについて整理した

TL;DR

  • NavigationButton で Android 向けに戻るボタンを配置可能
  • ActionItem でシェアボタンや削除ボタンを追加可能

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. ActionBar 単体
    2. NavigationButton
    3. ActionItem
    4. 使えるアイコン
  • まとめ
  • 参考文献
  • 環境・条件

    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
    47
    48
    49
    50
    51
    52
    53
    54
    55
    $ sw_vers
    ProductName: Mac OS X
    ProductVersion: 10.15.3
    BuildVersion: 19D76

    $ node -v
    v12.7.0

    $ npm -v
    6.10.3

    $ tns --version
    6.4.0

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

    $ tns plugin
    Dependencies:
    ┌───────────────────────────────┬─────────┐
    │ Plugin │ Version │
    │ @nativescript/theme │ ^2.2.1 │
    │ @vue/devtools │ ^5.0.6 │
    │ axios │ ^0.19.2 │
    │ nativescript-background-http │ ^4.2.1 │
    │ nativescript-barcodescanner │ ^3.4.1 │
    │ nativescript-camera │ ^4.5.0 │
    │ nativescript-fingerprint-auth │ ^7.0.2 │
    │ nativescript-imagepicker │ ^7.1.0 │
    │ nativescript-permissions │ ^1.3.8 │
    │ nativescript-plugin-firebase │ ^10.4.0 │
    │ 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 │
    │ vuex │ ^3.1.1 │
    └───────────────────────────────┴─────────┘
    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 │
    └────────────────────────────────────┴─────────┘
    • iPhone 11 Pro: iOS 13.3
    • Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)

    詳細

    ActionBar 単体

    まずは素の ActionBar

    参考:

    1
    <ActionBar title="My Title" />

    iOS

    Android

    NavigationButton で Android 向けに戻るボタンを配置可能。
    ※メソッドやアイコンを変更すれば「戻るボタン」以外の使い方でも良いはず。

    参考:

    1
    2
    3
    <ActionBar title="My Title">
    <NavigationButton android.systemIcon="ic_menu_back" @tap="back"/>
    </ActionBar>

    iOS (※変化なし)

    Android

    ActionItem

    ActionItem でシェアボタンや削除ボタンを追加可能。

    参考:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ActionBar title="My Title">
    <NavigationButton android.systemIcon="ic_menu_back" @tap="back"/>
    <ActionItem @tap="onTapShare"
    ios.systemIcon="9" ios.position="right"
    android.systemIcon="ic_menu_share" android.position="actionBar" />
    <ActionItem @tap="onTapDelete"
    ios.systemIcon="16" ios.position="right"
    text="delete" android.position="popup" />
    </ActionBar>

    iOS

    Android

    Android の 3-dots 箇所をタップすると delete という文字列がポップアップ表示される。

    使えるアイコン

    公式ページにアイコンに指定できる名称はまとまっている。
    ※実際のアイコンは見れないので使いづらい。

    Android

    R.drawable | Android デベロッパー | Android Developers

    iOS

    UIBarButtonSystemItem - UIKit | Apple Developer Documentation

    まとめ

    • NavigationButton で Android 向けに戻るボタンを配置可能
    • ActionItem でシェアボタンや削除ボタンを追加可能

    参考文献

    関連記事