选择器中的 selectedValue 未显示答案

【问题标题】：selectedValue in Picker not showing选择器中的 selectedValue 未显示
【发布时间】：2018-06-05 11:35:16
【问题描述】：

我遇到了 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 在小屏幕和大屏幕上都呈现。

非常感谢您。

【问题讨论】：

标签： react-native picker selectedvalue

【解决方案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 以便在屏幕的其他位置显示选择器，以确保有足够的空间正确显示它。

希望这会有所帮助！

【讨论】：

【解决方案2】：

来自this answer，您需要将选定的值转换为字符串。

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

【讨论】：