ActionBar

<ActionBar> 是 NativeScript 对 Android ActionBar 和 iOS NavigationBar 的抽象。它代表活动窗口顶部的工具栏，可以包含标题、应用程序级导航以及其他自定义交互项目。

也属于 ActionBar 抽象的视图

• ActionItem
• NavigationButton

<ActionBar title="MyApp" />

示例 ​

带有自定义标题视图的 ActionBar ​

<ActionBar>
  <GridLayout columns="auto, *" width="100%">
    <Image src="~/assets/icon.png" width="40" height="40" />
    <Label text="Custom Title" fontSize="24" />
  </GridLayout>
</ActionBar>

带有始终可见的 Android 图标的 ActionBar ​

<ActionBar
  title="ActionBar Title"
  android.icon="res://icon"
  android.iconVisibility="always"
/>

自定义 ActionBar ​

<ActionBar title="MyApp">
  <!-- explicitly hide the back button -->
  <NavigationButton visibility="collapsed" />

  <!-- show a Font Awesome icon on the left -->
  <ActionItem
    position="left"
    icon="font://&#xf0a8;"
    class="fas"
    tap="goBack"
  />

  <!-- Show a custom ActionItem on the right -->
  <ActionItem ios.position="right">
    <GridLayout width="100">
      <Button text="Action Item" />
    </GridLayout>
  </ActionItem>
</ActionBar>

从 ActionBar 中移除边框 ​

默认情况下，ActionBar 底部会绘制一个边框。除了边框之外，iOS 上还会在 ActionBar 上应用半透明过滤器。要移除边框和半透明效果，请设置 flat="true"

<ActionBar title="MyApp" flat="true" />

属性 ​

title ​

title: string

获取或设置 ActionBar 标题。

titleView ​

titleView: View

用自定义视图替换 title 属性。

注意：这是在 xml 中定义自定义子视图时设置的属性（除非是 ActionItem 或 NavigationButton 的实例）。

查看 View.

flat ​

flat: boolean

移除 Android 上的边框和 iOS 上的半透明效果。

默认为 false。

navigationButton ​

navigationButton: NavigationButton

获取或设置导航按钮（后退按钮）。

查看 NavigationButton.

actionItems ​

actionItems: ActionItems

获取或设置 ActionItems。

查看 ActionItem.

iosIconRenderingMode ​

actionBar.iosIconRenderingMode

获取或设置 iOS 中 ActionBar 图标的 UIImage.RenderingMode。

可用值

• automatic
• alwaysTemplate
• automatic

默认为 alwaysOriginal。

ActionItem ​

<ActionItem> 是用于向 ActionBar 添加操作按钮的 UI 组件。

<ActionBar title="MyApp">
  <ActionItem
    ios.systemIcon="9" ios.position="left"
    android.systemIcon="ic_menu_share" android.position="actionBar" />
  <ActionItem
    ios.systemIcon="16" ios.position="right"
    text="delete" android.position="popup" />
</ActionBar>

ActionItem 属性 ​

text ​

text: string

获取或设置 ActionItem 的文本。

icon ​

icon: string

获取或设置操作项目的图标。支持本地图像 (~/)、资源 (res://) 和字体图标 (fonts://)

ios.position ​

ios.position: 'left' | 'right'

设置 iOS 上 ActionItem 的位置。仅限 iOS。

可用值

• left：将项目放置在 ActionBar 的左侧。
• right：将项目放置在 ActionBar 的右侧。

默认为 left。

android.position ​

android.position: 'actionBar' | 'popup' | 'actionBarIfRoom'

设置 Android 上 ActionItem 的位置。仅限 Android。

可用值

• actionBar：将项目放置在 ActionBar 中。操作项可以以文本或图标两种方式呈现。
• popup：将项目放置在选项菜单中。项目将以文本形式呈现。
• actionBarIfRoom：如果 ActionBar 有空间，则将项目放置在 ActionBar 中。否则，将其放置在选项菜单中。

默认为 actionBar。

ios.systemIcon ​

ios.systemIcon: string

使用 UIBarButton.SystemIcon 设置 ActionItem 的图标。仅限 iOS。

android.systemIcon ​

android.systemIcon: string

设置 ActionItem 的图标。有关系统图标列表，请参考 R.drawable。仅限 Android。

查看 R.drawable.

actionBar ​

actionBar: ActionBar

获取包含 ActionItem 的 ActionBar。

NavigationButton ​

<NavigationButton> 是一个 UI 组件，提供对 Android 导航按钮和 iOS 后退按钮的抽象。

<ActionBar title="MyApp">
  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" />
</ActionBar>

NavigationButton 属性 ​

text ​

text: string

设置后退按钮的文本。仅限 iOS。

android.systemIcon ​

android.systemIcon: string

要显示在按钮中的图标。您可以指定任何以 ic_ 前缀开头的系统图标。有关可用图标的完整列表，请查看 R.drawable。仅限 Android。

查看 R.drawable

原生组件 ​

ActionBar ​

• Android: android.widget.Toolbar
• iOS: UINavigationBar

ActionItem ​

• Android: android.widget.Toolbar
• iOS: UINavigationItem

NavigationButton ​

• Android: android.widget.Toolbar
• iOS: UINavigationItem