Question

我遇到了React Native Picker的问题。

我的问题是Picker中的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,
    },

我找到了一个解决方案，即在Picker之外渲染一个组件，但是Text不可点击，这不是最好的UX设计..

有人可以帮忙吗？我只想让selectedValue在小屏幕和大屏幕上呈现。

非常感谢你。

Answer 1

不幸的是，如果您需要最小宽度来正确显示您的商品，那么您没有太多选择。您可以为项目定义样式，也可以降低其大小或使用使其较低的字体。例如：

<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} />

和风格

picker: {
        flex: 1,
        width: 50,
    },
pickerItem: {
       fontSize: 12
    }

或者/或者你可能需要更改你的UI才能在屏幕的其他地方显示选择器，以确保有足够的空间来正确显示它。

希望这有帮助！

Answer 2

从 this answer 开始，您需要将选定的值转换为字符串。

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

Picker中的selectedValue未显示

2 个答案: