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

Question

默认情况下，ListPicker占用大量屏幕空间。在手机上显示时，是否有办法使其表现得像HTML 的隐喻？ 我以前使用过此react native插件，确切地说是我想要的隐喻，但用于NativeScript。 通过NativeScript可以轻松做到这一点吗？我想利用特定于平台的选择隐喻，因此显示/隐藏ListPicker或将ListPicker放入模式不是我想要的。 另外，我将有一个相当长的列表，所以操作对话框对我不起作用。 更新：我知道nativescript下拉列表，但是它不使用平台特定的“从选择列表中选择”小部件，而webview并响应本机插件。 所谓“特定于平台的选项列表”，就是我的意思（来自https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select）： iOS（注释选择器使用rolodex选择器在键盘可以显示的位置进行渲染）： Android（注意模式，带有选项的滚动列表）：

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

您可以使用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];
}

相关问题

• DatePicker和ListPicker显示不正确
• Nativescript - ListPicker和Slider
• Nativescript将LIstPicker与JS对象一起使用
• NativeScript包装/循环ListPicker
• 备份时，NativeScript ListPicker不会重新加载数据
• 行为类似于`<select>`的NativeScript Angular ListPicker
• ListPicker绑定值始终设置为index而不是valueField
• 如何设置RadDataForm ListPicker的选择器样式
• ListPicker仅保存索引

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

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

Answer 2

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

您可以使用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];
}