NativeScript Angular ListPicker 的行为类似于 `<select>`

Posted 2023-02-19

【中文标题】NativeScript Angular ListPicker 的行为类似于 `<select>`

【英文标题】：NativeScript Angular ListPicker that behaves like `<select>`

【发布时间】：2019-06-02 09:44:35

【问题描述】：

默认情况下，ListPicker 会占用大量的屏幕空间。有没有办法让它在移动设备上显示时表现得像 html <select> 的隐喻？

我之前用过this react native plugin，这正是我想要的隐喻，但对于 NativeScript。

这很容易通过 NativeScript 实现吗？我想利用平台特定的选择隐喻，所以显示/隐藏ListPicker 或将ListPicker 放入模态不是我想要的。

另外，我将有一个相当长的列表，所以 action Dialog 不适合我。

更新：我知道nativescript-drop-down，但它不使用webviews 和react native plugin 所做的特定于平台的“从选项列表中选择”小部件。

我的意思是“从选项列表中选择特定平台”（来自https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select）：

iOS（使用 rolodex 选择器的音符选择器呈现键盘的位置）：

Android（注意模式，带有滚动选项列表）：

【问题讨论】：

你能澄清一下ListPicker 不是你想要的吗，当你突出显示的RN插件本质上是一个模式中的ListPicker 时？

是的，使用屏幕截图进行了更新。我不知道为什么它不让我根据meta.***.com/questions/253403/… 将 img 大小缩小到缩略图@

【参考方案1】：

我一直在寻找相同的解决方案，但找不到，所以我创建了自己的解决方案。我已为您附上样本here。

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

在您的 HTML 中

<StackLayout orientation="vertical"   backgroundColor="lightgray">
  <Label text="Country"   backgroundColor="red"></Label>
  <TextField [(ngModel)]="textFieldValue" hint="Choose countty..." editable="false" (tap)="showHideField('country')"></TextField>
</StackLayout>
<StackLayout orientation="vertical"   *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];

【讨论】：

谢谢。尽管此方法绝对有效，但它仍然在幕后使用<ListPicker>。希望有一种简单的方法来利用本地特定于平台的小部件。我认为仿真（如 nativescript-drop-down）是目前唯一的选择。

我在 NativeScript Playground 上尝试过，在 android 上出现以下错误：“主”线程上发生未捕获的异常。调用 js 方法 onValueChange 失败 TypeError: Cannot read property 'updateSelectedValue' of null 它确实在 ios 上工作。是什么导致了这个错误？

【参考方案2】：

我认为您正在寻找类似于您指出的 react-native-picker-select 的 nativescript-drop-down。

【讨论】：

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