Nativescript ActionBar/alignement ActionItem

Question

J'ai une personne question ici pourrait aider à résoudre ... J'ai actuellement un ActionBar qui ressemble à ceci:

Si vous touchez la loupe, voici ce qui est montré:

Et si vous touchez la flèche arrière, la barre d'action devrait être comme il était au début, mais quelque chose de bizarre se passe à la loupe ...

Je suis actuellement montrer/cacher les ActionItems avec l'attribut de visibilité, mais je ne sais pas pourquoi ce décalage se passe quand je leur montre à nouveau.

Le code actuel est quelque chose comme ceci:

<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

Vous utilisez la visibilité pour afficher/masquer les éléments d'action, Utilisez la même technique pour afficher ou masquer la barre de recherche, au lieu de * ngIf.

Essayez également de configurer android.position = "right" pour l'icône de la barre de recherche.