React Native Picker可以在某些项目之间使用某种分隔符或分隔符吗?

时间:2017-09-02 00:09:52

标签: react-native picker divider native-base

在其他React Native和Native Base组件中,我发现在主要的可选条目中你可以添加通常称为分隔符或分隔符的不可选择的东西。

然而,我无法在Picker组件中看到任何类型的东西。

我实现了一些像收藏夹顶部排序的收藏夹或最近的项目。能够在最喜欢的/最近的部分和主要部分之间插入一种可见的分界线会很好。

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

如果我可以在每个部分之前添加带有文本的标题,那就更好了。

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

Picker组件是否提供此功能,还是可以轻松添加?

2 个答案:

答案 0 :(得分:1)

来自RN的Picker组件不提供开箱即用的功能。如果您想使用可自定义的Picker,最好使用https://github.com/sohobloo/react-native-modal-dropdown。有一个名为renderSeparator的API道具我认为您可以轻松地用于您的目的。

答案 1 :(得分:1)

不确定在选择器项列表中创建部分。您可以做的是在所选内容上添加一行。

<强> IOS

您可以在Picker组件上添加itemStyle道具。 因此,您可以在所选元素上添加边框。

这是我做过的事情

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

enter image description here

<强>的Android

您可以找到Android here的解决方案,但我从未测试过它。该解决方案将为应用程序中的所有选择器添加样式。如果这是你想要的那么酷。

-

关于标题,我不确定这种元素存在的构建。 如果存在Picker.Item,那么拥有Picker.Header或其他东西会很不错,但我从未在文档或互联网上找到类似的内容。 如果我找到了可能有用的东西,我会把它放在这里。

希望这有帮助