英文:
@react-native-picker/picker is not displaying any of the options and changing the css. Not sure why
问题
我有一个React Native组件。我正在尝试实现一个带有选项的选择器，以便用户可以选择几个不同的选项之一。我已经设置好了，但当我加载应用程序时...它没有显示任何选项，但显示了某种类型的选择器。我不知道选择器发生了什么事情，无法弄清楚为什么没有显示任何选项。
我是否需要逐个编写每个选项？
我尝试了这样做，但在显示方面没有任何不同。
代码：
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Price Min: </Text>
</View>
<Picker
selectedValue={priceMin}
onValueChange={(value) => setPriceMin(value)}
>
{
propertyPricing.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Price Max: </Text>
</View>
<Picker
selectedValue={priceMax}
onValueChange={(value) => setPriceMax(value)}
>
{
propertyPricing.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Max Hoa: </Text>
</View>
<Picker
selectedValue={maxHoa}
onValueChange={(value) => setMaxHoa(value)}
>
{
hoaAmounts.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Sqft Min: </Text>
</View>
<Picker
selectedValue={sqftMin}
onValueChange={(value) => setSqftMin(value)}
>
{
sqftOptions.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Sqft Max: </Text>
</View>
<Picker
selectedValue={sqftMax}
onValueChange={(value) => setSqftMax(value)}
>
{
sqftOptions.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
英文:
I have a react native component. I am trying to implement a picker with options so that the user can select one of a handful of different options. I set it up and when I loaded the application... it did not display any options but it shows that there is some type of picker there. I have no idea what is happening with picker and can not figure out why no options are showing.
Do I have to individually write each of the options out?
I tried that and did not get any difference in display
code:
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Price Min: </Text>
</View>
<Picker
selectedValue={priceMin}
onValueChange={(value) => setPriceMin(value)}
>
{
propertyPricing.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Price Max: </Text>
</View>
<Picker
selectedValue={priceMax}
onValueChange={(value) => setPriceMax(value)}
>
{
propertyPricing.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Max Hoa: </Text>
</View>
<Picker
selectedValue={maxHoa}
onValueChange={(value) => setMaxHoa(value)}
>
{
hoaAmounts.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Sqft Min: </Text>
</View>
<Picker
selectedValue={sqftMin}
onValueChange={(value) => setSqftMin(value)}
>
{
sqftOptions.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
<View style={styles.detailRow}>
<View>
<Text style={styles.detailSection}>Sqft Max: </Text>
</View>
<Picker
selectedValue={sqftMax}
onValueChange={(value) => setSqftMax(value)}
>
{
sqftOptions.map((item) => {
return(
<Picker.Item label={item.label} value={item.value} />
)
})
}
</Picker>
</View>
答案1
得分: 1
确保您为您的选择器及其项目提供足够的高度、宽度和颜色，否则它们可能不可见。
<Picker
style={{ height: 50, width: 150 }}
itemStyle={{ color: "black" }}
selectedValue={priceMin}
onValueChange={(value) => setPriceMin(value)}
>
{propertyPricing.map((item) => {
return (<Picker.Item label={item.label} value={item.value} />)
})}
</Picker>
英文:
You need to make sure that you have given enough height, width, and color to your picker and its items, otherwise they might not be visible.
<Picker
style={{ height: 50, width: 150 }}
itemStyle={{ color: "black" }}
selectedValue={priceMin}
onValueChange={(value) => setPriceMin(value)}
>
{propertyPricing.map((item) => {
return (<Picker.Item label={item.label} value={item.value} />)
})}
</Picker>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论