Question

我正在使用Nativscript-ui-listview（RadListView组件）。在列表中，我显示自己构建的小部件。在Android上没有问题，一旦我打开列表，它们都会全部加载并显示。但是在IOS上，当我滚动经过它们然后再滚动回到它们之后，会出现一些负载，根本不会显示。左图是Android，右图是IOS。该列表显示了三个小部件，一个图表小部件，地图和一个带有数字的小部件。如何让它们显示在IOS上？

const routes = [
    {
        name: "Courses",
        key: "courses"
    },
    {
        name: "TestSeries",
        key: "testSeries"
    },
    {
        name: "Video",
        key: "video"
    }
]
...
...
<SafeAreaView style={{ flex: 1 }}>
    <MaterialTabs
        items={[routes]}
        selectedIndex={this.state.selectedTab}
        onChange={this.setTab}
        barColor="#fff"
        indicatorColor="#af2d19"
        activeTextColor="#000"
    />
</SafeAreaView>

@Component({
  selector: 'app-newlist',
  templateUrl: './new-widgets-list.component.html',
  styleUrls: ['./new-widgets-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  moduleId: module.id,
})

export class NewListComponent implements OnInit {
  public title: String = 'Widgets';
  public widgetsListSubscription = new Subscription;
  public widgets$: ObservableArray < Widget > ;
  public _sourceDataItems: ObservableArray < Widget > ;
  public _sourceDataItems2: ObservableArray < Widget > ;
  public processing$ = new BehaviorSubject < boolean > (true);
  public listview: RadListView;
  public layout: ListViewLinearLayout;

  constructor(public page: Page,
    private readonly store: Store < AppState > ) {
    this.initData();
  }

  ngOnInit(): void {
    this.widgets$ = new ObservableArray < Widget > ();
  }

  public get dataItems(): ObservableArray < Widget > {
    return this._sourceDataItems2;
  }

  private initData(): void {
    this._sourceDataItems = new ObservableArray < Widget > ();
    const data = this.store.pipe(
      select(getDisplayedWidgets),
      map(idmap => Object.values(idmap))
    );
    data.subscribe(list => this._sourceDataItems.push(list));
    this._sourceDataItems2 = this._sourceDataItems;
  }
}

Answer 1

在iOS中，ListView应该具有预定义的大小，否则它将不占据任何空间或导致某些副作用，因为ios U | X中不支持动态行大小。我早些时候遇到过这类问题。为行模板中的项目提供高度可以解决我的问题，例如

<ng-template tkListItemTemplate let-item="item">
      <StackLayout orientation="vertical" height="250">
        <GridLayout columns="auto" height="250">
          <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
        </GridLayout>
      </StackLayout>
</ng-template>

确保在app-widgets-picker组件中也分配了高度。

P.S。是的，我注意到您正在使用ListViewLinearLayout，但这不能解决目的。

Answer 2

因此，我尝试了许多不同的方法来解决此问题，最后我发现了一种适用于android和ios的工具。它可能没有像ListView那样内置所有花哨的东西，但在两个平台上都能很好地工作。当可观察对象获取新数据并且没有ui故障时，它将更新ui。

解决方案是仅使用ScrollView和ngFor显示列表项。我只用较少的列表项（10-20）进行了尝试，并且加载速度非常快。

<ScrollView orientation="vertical">
  <GridLayout rows="auto, auto">
    <StackLayout row="0">
      <StackLayout *ngFor="let item of obs$ | async" class="card">
        <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
      </StackLayout>
    </StackLayout>
  </GridLayout>
</ScrollView>

这不能解决我在ios上使用LitView遇到的问题，但是暂时可以使用。

Answer 3

我的数据由于故障而没有在Android上显示。我按照@Narendra所说的做，并在ngOnChanges函数中执行了相应的代码。

ngOnChanges(){
    if (this.item.profilePhoto === undefined) this.setAnonimProfilePhoto();
    if (!this.item.isOnline) this.userOfflineFromNow();
    this.getCityName();
}

@Narendra，谢谢。

Nativescript Listview在iOS上的不同行为

3 个答案: