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

在这里发生什么任何意见。

我尝试了这里提供的解决方案 - https://github.com/NativeScript/nativescript-angular/issues/487 @tsonevn但是这并不适用于我的项目。 –

答

这个问题和解决方法被提及here。在父StackLayout中设置stretch属性对我有用。

谢谢@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 {

Nativescript - 搜索栏在操作栏（IOS）中无法正确显示

相关推荐