React Native Picker 可以在某些项目之间有某种分隔符或分隔符吗？答案

【问题标题】：Can a React Native Picker have some kind of divider or separator between some Items?React Native Picker 可以在某些项目之间有某种分隔符或分隔符吗？
【发布时间】：2018-02-11 01:18:55
【问题描述】：

在其他 React Native 和 Native Base 组件中，我已经看到，在主要的可选条目中，您可以添加通常称为分隔符或分隔符的不可选择的内容。

但是，我在 Picker 组件中看不到任何类似的东西。

我正在实现诸如收藏夹或在选择器顶部排序的最近项目之类的东西。如果能够在最喜欢/最近的部分和主要部分之间插入一种可见的分界线，那就太好了。

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

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

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

Picker 组件是否提供此功能，或者是否可以轻松添加？

【问题讨论】：

标签： react-native picker divider native-base

【解决方案1】：

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

【讨论】：

【解决方案2】：

不确定是否要在选择器项目列表中创建部分。你可以做的是在选中的地方添加一行。

IOS

您可以在 Picker 组件上添加 itemStyle 属性。例如，您可以在所选元素上添加边框。

这就是我所做的

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

安卓

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

关于标题，我不确定是否存在这种内置元素。作为Picker.Item 存在，拥有Picker.Header 或其他东西会很好，但我从未在文档或互联网上找到类似的东西。如果我找到可以帮助的东西，我会把它放在这里。

希望对你有帮助

【讨论】：