NativeScript Angular ListPicker可以像`<select>`一样使用的方法

Question

默认情况下，ListPicker 占用了大量的屏幕空间。是否有一种方法使其在移动设备上表现得像HTML <select> 的隐喻一样？

我以前使用过this react native plugin，它恰好是我想要的隐喻，但是用于NativeScript。

通过NativeScript轻松实现这一点吗？我想利用特定于平台的选择隐喻，因此显示/隐藏ListPicker或将ListPicker放入模态框中并不是我想要的。

此外，我将拥有一个相当长的列表，因此action Dialog对我来说不可行。

更新：我知道nativescript-drop-down，但它不使用特定于平台的“从选项列表中选择”小部件，这是Web视图和React Native插件所使用的。

通过“特定于平台的选择列表小部件”，我指的是这个（来自https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select）：

iOS（注意选择器呈现在键盘位置，带有转轮选择器）：

安卓（注意模态，带有滚动选项列表）：

- rynop

---

你能澄清一下，当你强调的RN插件本质上是一个模态框中的ListPicker时，为什么模态框中的ListPicker不是你想要的？ - Ian MacDonald

是的，已经更新并附上了截图。我不知道为什么它不允许我按照 https://meta.stackoverflow.com/questions/253403/how-to-reduce-image-size-on-stack-overflow 的要求将图片大小缩小到缩略图。 - rynop

Answer 1

我认为你正在寻找nativescript-drop-down，它类似于你提到的react-native-picker-select。

- Manoj

---

我看到了，但它没有使用特定于平台的选择器。我会更新我的问题以使其更清晰。 - rynop

Answer 2

我曾经也在寻找同样的解决方案，但是没有找到，所以我自己创建了一个。我已经为您附上了一个示例here。

您可以拥有一个textField/Label，在onTab时显示ListPicker，就像HTML中的Select一样，它将仅使用本地（特定于平台）组件。

在您的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];
}

- Narendra

---

谢谢。虽然这种方法肯定是可行的，但它仍然在底层使用<ListPicker>。希望有一种简单的方法来利用本地平台特定的小部件。我认为模拟（如nativescript-drop-down）目前是唯一的选择。 - rynop

我在NativeScript Playground上尝试了一下，但在Android上出现了以下错误：“main”线程上发生了未捕获的异常。 调用js方法onValueChange失败 TypeError：无法读取null的属性'updateSelectedValue'但在iOS上可以正常工作。 是什么导致了这个错误？ - Ori Idan