首页 文章

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

提问于
浏览 次
0

我正在创建一个nativescript角应用程序 . 在为我的应用创建搜索栏时注意到一些非常奇怪的行为 . 虽然搜索栏在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

关于这里发生什么的任何建议 .

ios nativescript angular2-nativescript

2 回答

  • 0

    提到了此问题和解决方法here . 在父StackLayout中设置stretch属性对我有用 .

    回复于
  • 0

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

相关问题