Nativescript - 搜索欄在操作欄（IOS）中無法正確顯示

正在創建原生腳本角度應用程序。當爲我的應用程序創建搜索欄時注意到一些非常奇怪的行爲。雖然搜索欄完全顯示在iOS中的Android操作欄中，但搜索欄最初並未顯示。但是，如果我反覆緩慢地更改設備方向搜索欄會慢慢地開始顯示在操作欄中，每當我更改設備方向時寬度會逐漸增加！Nativescript - 搜索欄在操作欄（IOS）中無法正確顯示

我的代碼如下

app.component.html

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

在app.component我打電話作爲一個單獨的組件搜索欄。

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 { }

使用Nativescript 2.5

在這裏發生什麼任何意見。

來源

2017-03-06 Krithika Muthukrishnan

我嘗試了這裏提供的解決方案 - https://github.com/NativeScript/nativescript-angular/issues/487 @tsonevn但是這並不適用於我的項目。 –

這個問題和解決方法被提及here。在父StackLayout中設置stretch屬性對我有用。

來源

2017-03-07 13:35:17 Anurag

謝謝@Anurag。這對我有效。 –

我在我的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 {

來源

2017-03-07 05:53:59 ramya0072

Nativescript - 搜索欄在操作欄（IOS）中無法正確顯示

回答

相關問題