Nativescript ActionBar / ActionItem对齐

Question

我有一个问题，有人可能会帮助解决...我现在有一个看起来像这样的ActionBar：

如果触摸放大镜，则会显示以下内容：

如果你触摸后箭头，动作栏应该像起初一样，但放大镜会发生奇怪的事情......

我目前正在使用visibility属性显示/隐藏ActionItems，但是当我再次显示它时，我不知道为什么会出现这种错位。

实际代码是这样的：

<ActionBar
    class="action-bar"
    title="{{ actionBarTitle }}"
    [ngClass]="{
        'action-bar-search-bar-visible' : showSearch
    }"
>
    <!-- Android menu button -->
    <NavigationButton
        (tap)="toggleDrawer()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        *ngIf="isAndroid"
        class="action-bar-item"
        icon="res://menu_icon_white"
    ></NavigationButton>
    <!-- iOS menu button -->
    <ActionItem
        (tap)="toggleDrawer()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        *ngIf="isiOS &&"
        class="action-bar-item action-bar-item-menu-icon"
        ios.position="left"
    ><Image src="res://menu_icon_white"></Image></ActionItem>
    <!-- Search bar toggle -->
    <ActionItem
        (tap)="toggleSearch()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        android.position="popup"
        class="action-bar-item action-bar-item-menu-icon"
        ios.position="right"
    ><Image src="res://ic_search"></Image></ActionItem>
    <!-- Search bar -->
    <search-bar-custom
        *ngIf="showSearch"
        (on-search-hide)="toggleSearch()"
    ></search-bar-custom>
</ActionBar>

Answer 1

您正在使用可见性来显示/隐藏操作项， 使用相同的技术来显示或隐藏搜索栏，而不是* ngIf。

同时尝试为搜索栏图标设置android.position =“right”。