NativeScript Angular ListPicker, который ведет себя как `<select>`

Question

По умолчанию ListPicker занимает тонну экрана. Есть ли способ заставить его вести себя как метафора для HTML <select> когда показывается на мобильном?

Я использовал этот плагин реагировать нативно, и это именно та метафора, которую я хочу, но для NativeScript.

Это легко сделать с помощью NativeScript? Я хочу использовать метафоры выбора для конкретной платформы, поэтому показ / скрытие ListPicker или положить ListPicker в модале это не то, что я ищу.

Кроме того, у меня будет довольно длинный список, поэтому действие Dialog для меня не сработает.

Обновление: мне известно о ниспадающем списке nativescript, однако он не использует специфичный для платформы виджет "выбор из списка вариантов", который делают веб-просмотры и реагирует на собственный плагин.

Под "платформой выберите виджет из списка вариантов" я имею в виду это (из https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select):

iOS (средство выбора заметок отображается там, где должна располагаться клавиатура, с помощью средства выбора Rolodex):

Android (примечание модальное, со списком параметров прокрутки):

Answer 1

Я думаю, что вы ищете ниспадающий код nativescript, похожий на тот, который вы указали на response -native-picker-select.

Answer 2

Я искал такое же решение и не мог найти его, поэтому создал свое собственное. Я приложил образец для вас здесь.

Вы можете иметь textField / Label и на вкладке, вы можете показать ListPicker, как Select ведет себя в HTML и будет использовать только нативные (специфичные для платформы) компоненты.

в вашем HTML

<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
  <Label text="Country" width="70" height="50" backgroundColor="red"></Label>
  <TextField [(ngModel)]="textFieldValue" hint="Choose countty..." editable="false" (tap)="showHideField('country')"></TextField>
</StackLayout>
<StackLayout orientation="vertical" width="100%" height="210" *ngIf="showCountryPicker" backgroundColor="lightgray">
  <ListPicker [items]="listPickerCountries" (selectedIndexChange)="selectedCountyChanged($event)"></ListPicker>
</StackLayout>

и ваш файл.ts

showCountryPicker = false;
listPickerCountries: Array < string > = ["Australia", "Belgium", "Bulgaria", "Canada", "Switzerland",
  "China", "Czech Republic", "Germany", "Spain", "Ethiopia", "Croatia", "Hungary",
  "Italy", "Jamaica", "Romania", "Russia", "United States"
];

showHideField() {
  this.showCountryPicker = true;
}
selectedCountyChanged(args) {
  const picker = < ListPicker > args.object;
  this.showCountryPicker = false;
  this.textFieldValue = this.listPickerCountries[picker.selectedIndex];
}