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

Posted 2023-04-13

【中文标题】Nativescript - 搜索栏在操作栏中无法正确显示（IOS）

【英文标题】：Nativescript - Search Bar does not display correctly within action bar (IOS)

【发布时间】：2017-07-26 11:55:25

【问题描述】：

我正在创建一个 nativescript Angular 应用程序。在为我的应用创建搜索栏时注意到一些非常奇怪的行为。虽然搜索栏在 ios 的 android 操作栏中完美显示，但搜索栏最初根本不显示。但是，如果我反复缓慢地改变设备方向搜索栏慢慢开始显示在操作栏中，每次我改变设备方向时它的宽度都会逐渐增加！

我的代码如下

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

关于这里发生的事情的任何建议。

【问题讨论】：

我尝试了此处提供的分辨率 - github.com/NativeScript/nativescript-angular/issues/487 @tsonevn 但这对我的项目不起作用。

【参考方案1】：

提到了这个问题和解决方法here。在父 StackLayout 中设置拉伸属性对我有用。

【参考方案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