Question

我正在开发一个sidedrawer组件，该组件应将汉堡菜单按钮动态添加到该组件创建的操作栏上。我可以使用带有我已获得的代码的图像成功

private setActionBarIcon(page: Page) {
    if (isAndroid) {
        page.actionBar.navigationButton = this.getNavigationButton();
    }

    if (isIOS) {
        page.actionBar.actionItems.addItem(this.getNavigationButton());
    }
}

private getNavigationButton() {
    let navActionItem = new ActionItem();
    navActionItem.icon = 'res://ic_menu_white';
    if (navActionItem.ios) {
        navActionItem.ios.position = 'left';
    }
    navActionItem.on('tap', this.toggleDrawer.bind(this));
    return navActionItem;
}

我想使用标签而不是图像来实现此功能，以便我可以更改菜单按钮的样式/添加所需的任何其他样式。

有人可以指导我如何实现它吗？

我尝试通过

    private getNavigationButton() {
    let navActionItem = new ActionItem();
    //navActionItem.icon = 'res://ic_menu_white';

    const contentView = new ContentView();
    contentView.className = "menu";

    const label = new Label();
    label.className = "mdi icon-menu";
    label.text = String.fromCharCode(0xf1e0);
    contentView.content = label;
    contentView.onLoaded();
    navActionItem._addView(contentView);
    // navActionItem.text = String.fromCharCode(0xe5d2);
    // navActionItem.className = "mdi"
    if (navActionItem.ios) {
        navActionItem.ios.position = 'left';
    }
    navActionItem.on('tap', this.toggleDrawer.bind(this));
    return navActionItem;
}

但是我无法使该功能正常工作。有人可以指导我做错什么吗？如何在运行时将Label控件添加为ActionItem？

Answer 1

这是将Label动态添加到现有ActionBar的方法。将变量isLabelVisible设置为true / false将使您的Label显示/消失。

<ActionBar title="test">
  <StackLayout orientation="horizontal"
    ios:horizontalAlignment="center"
    android:horizontalAlignment="left">
    <Label text="NativeScript" class="action-label" visibility="{{ isLabelVisible ? 'visible' : 'collapse' }}"></Label>
  </StackLayout>
</ActionBar>

我希望这会有所帮助。有关更多信息，请查看ActionBar文档： https://docs.nativescript.org/ui/action-bar

根据建议，您还可以使用Angular方法动态显示它：

<Label text="NativeScript" class="action-label" *ngIf="isLabelVisible"></Label>

如果仅向ActionBar中的StackLayout提供id="container"，则应该可以在JS中以编程方式添加Label：

const observableModule = require("tns-core-modules/data/observable");
const labelModule = require("tns-core-modules/ui/label");

function showLabelDynamically(args) {
    const page = args.object;
    const container = page.getViewById("container");
    const vm = new observableModule.Observable();

    const myLabel = new labelModule.Label();
    myLabel.text = "The quick brown fox jumps over the lazy dog.";

    // Styling a label via css type
    myLabel.text = "The quick brown fox jumps over the lazy dog.";
    let pageCSS = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;} ";

    // set to the page css property the CSS style defined in the pageCSS
    page.css = pageCSS;

    container.addChild(myLabel);
    page.bindingContext = vm;
}
exports.showLabelDynamically = showLabelDynamically;

以编程方式将Label添加到现有ActionBar

1 个答案: