React native 选择器中的selectedValue未显示

我和本地采摘者有问题

我的问题是选择器中的selectedValue不会在小屏幕上显示！在大屏幕上，它工作得很好，但在一定的宽度下，selectedValue不会被渲染，只有小的向下箭头

当我手动将选择器的宽度设置为100时，效果很好，但是，如果宽度设置为50（这是我所需要的），则selectedValue不会渲染，只有向下的箭头

我的代码如下所示：

<Picker
    selectedValue={props.selectedCurrency}
    style={headerStyle.picker}
    onValueChange={props.setCurrency}
    >
        <Picker.Item label="USD" value={Currency.USD} />
        <Picker.Item label="EUR" value={Currency.EUR} />
</Picker>

picker: {
        flex: 1,
        width: 50,
    },

我已经想出了一个解决方案，那就是在选择器之外渲染一个组件，但是文本是不可点击的，这不是最好的UX设计

有人能帮忙吗？我只希望selectedValue在小屏幕和大屏幕上都呈现

---

非常感谢您。

不幸的是，如果您需要最小宽度来正确显示您的项目，您没有太多选择。你可以为你的项目定义一个样式，也许可以减小它们的大小，或者使用一种使它们变小的字体。例如：

<Picker
selectedValue={props.selectedCurrency}
style={headerStyle.picker}
itemStyle={headerStyle.pickerItem}
onValueChange={props.setCurrency}
>
    <Picker.Item label="USD" value={Currency.USD} />
    <Picker.Item label="EUR" value={Currency.EUR} />

或者/或者您必须更改UI，以便在屏幕的其他位置显示选择器，以确保有足够的空间正确显示它

希望这有帮助

从中，您需要将所选值转换为字符串

<Picker
//...
selectedValue={props.selectedCurrency ? props.selectedCurrency.toString() : null}
//...
>

<Picker
//...
selectedValue={props.selectedCurrency ? props.selectedCurrency.toString() : null}
//...
>