react-native - 适用于 iOS 和 Android 的原生 Base 选择器,具有动态创建的项目列表
问题描述
我正在尝试在与 iOS 和 Android 兼容的 Vue Native 项目中编写 Native Base Picker 组件。以下代码在两者上都能正常工作:
<template>
<nb-content>
<nb-text>Picker</nb-text>
<nb-picker
mode="dropdown"
:selectedValue="selected1"
:onValueChange="onValueChange"
>
<item label="Wallet" value="key0" />
<item label="ATM Card" value="key1" />
<item label="Debit Card" value="key2" />
<item label="Credit Card" value="key3" />
<item label="Net Banking" value="key4" />
</nb-picker>
</nb-content>
</template>
<script>
import { Picker } from 'native-base';
export default {
components: { Item: Picker.Item },
data() {
return {
selected1: "key1"
};
},
methods: {
onValueChange(value) {
this.selected1 = value;
}
}
}
</script>
这很好,但下一步是通过让组件从数组中生成选择器项目来使组件更具可重用性。这是我的尝试:
<template>
<nb-content>
<nb-text>Picker</nb-text>
<nb-picker
mode="dropdown"
:selectedValue="selected1"
:onValueChange="onValueChange"
>
<nb-text v-for="choice in choices" :key="choice.id">
<item :label="choice.name" :value="choice.id" />
</nb-text>
</nb-picker>
</nb-content>
</template>
<script>
import { Picker } from 'native-base';
export default {
components: { Item: Picker.Item },
data() {
return {
selected1: "key1",
choices: [
{ id: 'key0', name: 'wallet' },
{ id: 'key1', name: 'ATM card' },
{ id: 'key2', name: 'debit card' },
{ id: 'key3', name: 'credit card' },
{ id: 'key4', name: 'net banking' }
]
};
},
methods: {
onValueChange(value) {
this.selected1 = value;
}
}
}
</script>
这在 iOS 和 Android 上都失败了。在 iOS 上,选择器不会显示任何项目。在 Android 上,会抛出一个错误,上面写着“更新由 AndroidDropdownPicker 管理的视图的属性‘项目’时出错”,然后是一个新行,上面写着“null”,然后是另一个新行,上面写着“标签”。应该改变什么才能让它工作?
解决方案
推荐阅读
- python - Python:用列的唯一现值填充数据框中的列
- c++ - 如果这是未定义的行为,那么为什么将其作为看似合理的示例给出呢?
- c++ - 在反序列化过程中如何合理分配内存?
- python - 在 Tkinter 树视图中动态添加列
- redis - ServiceStack:手动调用服务时恢复管道?
- shell - Shell 总是评估 &&? 的两个因素
- android - Android Studio 4.1:尝试启动 Android Studio 时出现内部错误
- sql - 如何在 BigQuery 的列中分隔文本
- javascript - @react-google-maps/api 加载千标记和 markerClusterer 时非常慢
- sql - 运行 PERCENT_RANK() 并将结果保存到表中