Nativescript - 検索バーがアクションバー（IOS）内で正しく表示されない

Question

Nativescript角度アプリを作成しています。私のアプリの検索バーを作成するときに、非常に奇妙な動作に気づいた。検索バーはIOSのAndroidのアクションバー内に完全に表示されますが、最初は検索バーが表示されません。しかし、デバイスの向きをゆっくりと変化させると、デバイスの向きを変えるたびに徐々に幅が広がり、検索バーがゆっくりとアクションバーに表示され始めます。私は別のコンポーネントとして検索バーを呼び出していますapp.component内

app.component.html

<StackLayout sdkToggleNavButton> 
    <ActionBar title="" backgroundColor="#f82462"> 
     <StackLayout> 
     <app-search-bar></app-search-bar> 
     </StackLayout> 
</ActionBar> 

を次のように

私のコードです。

ここで起こっていただきました！上の任意のアドバイスをNativescript 2.5を使用して

searchbarComponent.ts

import { Component } from "@angular/core"; 
import searchBarModule = require("ui/search-bar"); 

@Component({ 
selector: "app-search-bar", 
template: ` 
<SearchBar class ="sb" #sb hint="Enter topic to get questions" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar> ` 
}) 
export class SearchBarComponent { } 

。

Answer 1

この問題と回避策はhere言及されています。親StackLayoutのストレッチ属性を設定することは私の仕事でした。

Answer 2

Nativescriptプロジェクトで検索コンポーネントを使用していて、うまく機能しています。私のコードを参照することができます。

search.component.html

<ActionBar title="Search"> 
     <NavigationButton android.systemIcon="ic_menu_back" text=" " pageTransition="fade"></NavigationButton> 
    </ActionBar> 
<StackLayout toggleNavButton> 
    <StackLayout> 
     <!-- >> basic-search-bar-html --> 
     <SearchBar #sb hint="SEARCH FOR INSPIRATION" [(ngModel)]="category" [text]="searchPhrase" (submit)="onSearchTap()"></SearchBar> 
     <!-- << basic-search-bar-html --> 
    </StackLayout> 

    <!-- >> Search result listing here --> 
    <GridLayout rows="auto, *"> 
     <ListView [items]="category" row="1"> 

search.componet.ts

import { Component } from "@angular/core"; 
import { Observable } from 'rxjs/Observable'; 
import { searchService } from '../../shared/search/search.service'; 

@Component({ 
    selector: 'search', 
    templateUrl: "pages/search/search.component.html", 
    styleUrls: ["pages/search/search.component.css"], 
    providers: [searchService] 
}) 

export class SearchBarComponent {