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

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

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

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

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

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

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

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

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


nativescript angular2-nativescript nativescript-angular nativescript-plugin nativescript-telerik-ui
person rynop    schedule 07.01.2019    source источник
comment
Можете ли вы пояснить, что ListPicker в модальном окне - это не то, что вам нужно, когда плагин RN, который вы выделяете как именно то, что вы хотите, по сути является ListPicker в модальном?   -  person Ian MacDonald    schedule 07.01.2019
comment
да, обновление сделано со скриншотами. Я не знаю, почему он не позволяет мне уменьшать размеры img до миниатюры на meta.stackoverflow.com/questions/253403/   -  person rynop    schedule 07.01.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

person Manoj    schedule 07.01.2019
comment
Я видел это, но он не использовал селекторы, специфичные для платформы. Я обновлю свой q, чтобы быть более понятным. - person rynop; 07.01.2019

arrow_upward
0
arrow_downward

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

У вас может быть textField / Label и onTab, вы можете показать 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];
}

person Narendra    schedule 09.01.2019
comment
Спасибо. Хотя этот метод определенно работает, он по-прежнему использует <ListPicker> под прикрытием. Надеялся, что есть простой способ использовать собственные виджеты для конкретной платформы. Я думаю, что эмуляция (например, выпадающий список nativescript) в настоящее время является единственным вариантом. - person rynop; 09.01.2019