Может ли React Native Picker иметь какой-то разделитель или разделитель между некоторыми элементами?

В других компонентах React Native и Native Base я видел, что среди основных выбираемых элементов ввода вы можете добавлять невыбираемые элементы, обычно называемые разделителями или разделителями.

Однако я не вижу ничего подобного в компонентах Picker.

Я использую что-то вроде избранного или недавних элементов, отсортированных в верхней части окна выбора. Было бы неплохо иметь возможность вставить своего рода видимую разделительную линию между избранным / недавним разделом и основным разделом.

+-----------+
| Ford      |
| Chevrolet |
+-----------+
| Toyota    |
| Nissan    |
| ...       |

Было бы еще лучше, если бы я мог добавлять заголовок с текстом перед каждым разделом.

+-----------+
|==Recent===|
+-----------+
| Ford      |
| Chevrolet |
+-----------+
|=The rest==|
+-----------+
| Toyota    |
| Nissan    |
| ...       |

Обеспечивает ли это компонент Picker или его можно легко добавить?


react-native picker native-base divider
person hippietrail    schedule 02.09.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Компонент Picker от RN не предоставляет этого из коробки. Если вы хотите использовать очень настраиваемый Picker, вам лучше использовать https://github.com/sohobloo/react-native-modal-dropdown. Есть поддержка API под названием renderSeparator, которую, я думаю, вы могли бы легко использовать для своих целей.

person Wanda Ichsanul Isra    schedule 02.09.2017

arrow_upward
1
arrow_downward

Не уверен в создании разделов в списке элементов выбора. Что вы можете сделать, так это добавить строку к выбранному.

IOS

Вы можете добавить свойства itemStyle в компонент Picker. Таким образом, вы можете, например, добавить границу к выбранному элементу.

Вот что я сделал

<Picker
    selectedValue={filter}
    onValueChange={this._onFilterSelect}
    style={sharedStyles.floatingPicker}
    itemStyle={{ borderTopWidth: 1, borderTopColor: '#000', borderBottomWidth: 1, borderBottomColor: '#000' }}
>

введите здесь описание изображения

Android

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

--

Что касается заголовка, я не уверен, что такой встроенный элемент существует. Поскольку Picker.Item существует, было бы неплохо иметь Picker.Headerили что-нибудь, но я никогда не находил ничего подобного ни в документах, ни в Интернете. Если найду что-нибудь, что может помочь, я положу сюда.

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

person ansmonjol    schedule 14.09.2017