selectedValue в Picker не отображается - PullRequest
Новая
       10

selectedValue в Picker не отображается

0 голосов
/ 05 июня 2018

У меня проблема с React Native Picker.

Моя проблема в том, что selectedValue в Picker не отображается на маленьких экранах!На больших экранах он работает просто отлично, но при определенной ширине 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...

Может кто-нибудь помочь?Я просто хочу, чтобы выбранное значение отображалось на маленьких и больших экранах.

Заранее большое спасибо.

1 Ответ

0 голосов
/ 05 июня 2018

К сожалению, если вам нужна минимальная ширина для правильного отображения ваших предметов, у вас нет большого выбора.Вы можете определить стиль для своих элементов и, возможно, уменьшить их размер или использовать шрифт, который делает их более низкими.Например: 

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

Или / и, возможно, вам придется изменить свой пользовательский интерфейс, чтобы отобразить средство выбора в другом месте вашегона экране должно быть достаточно места для его правильного отображения.

Надеюсь, это поможет!

...