Question

我尝试使用Nativescript在Actionbar中实现下拉列表导航，但似乎无法找到有关它的任何信息。

与this和this类似。

我目前有一个简单的ActionBar：

==

任何提示？

Answer 1

您可以在第一个示例图像中创建ActionBar，如下所示：

        <Page.actionBar>
        <ActionBar>
            <ActionBar.actionItems>
                <ActionItem android.position="popup" text="Add contact" />
                <ActionItem android.position="popup" text="About" />
            </ActionBar.actionItems>
        </ActionBar>
    </Page.actionBar>

这将在Android上看起来正确。我不知道如何让它适用于iOS。

Answer 2

我已经使用NativeScript DropDown了。这是我的nativescript-angular模板：

<ActionBar title="Some title" automationText="ActionBar">
    <StackLayout orientation="horizontal"
                 ios:horizontalAlignment="center"
                 android:horizontalAlignment="left">
                    <DropDown #dd
                      [items]="dropDownItems"
                      [selectedIndex]="dropDownSelectedId"
                      (selectedIndexChanged)="onDropDownSelect($event)"
                      class="action-label text-bold"
                      row="1" colSpan="2">
                    </DropDown>
    </StackLayout>
</ActionBar>

希望它有所帮助！

Answer 3

我使用 nativescript-menu 为 Android 和 iOS 添加弹出菜单。在 HTML 文件中添加以下代码以在操作栏中添加菜单图标。

<ActionBar class="action-bar-container">
<Label text="My Action Bar" class="action-bar-title"></Label>
      <ActionItem class="fas" icon="font://&#xf142;" ios.position="left" id="menuBtn" (tap)="buttonTap()"></ActionItem>
</ActionBar>

记得在你的打字稿文件中导入库：import { Menu } from "nativescript-menu";

最后在打字稿文件中添加以下代码。

  buttonTap() {
    Menu.popup({
      view: this.page.getViewById("menuBtn"),
      actions: ["Example", "NativeScript", "Menu"]
    })
      .then(action => {
        alert(action.id + " - " + action.title);
      })
      .catch(console.log);
  }

Nativescript Actionbar下拉列表导航

3 个答案: