Reactネイティブピッカーは、いくつかのアイテム間に何らかの種類の仕切りや区切りを持つことができますか？

Question

他のReact Native BaseコンポーネントとNative Baseコンポーネントでは、主に選択可能なエントリ項目の中に、通常はディバイダまたはセパレータと呼ばれる選択不可能なものを追加することができます。

ただし、ピッカーコンポーネントでは何も表示されません。

私はお気に入りや最近のアイテムをピッカーの上部でソートしています。好きな/最近のセクションとメインセクションの間に一種の目に見える分割線を挿入できるのはうれしいことです。

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

各セクションの前にテキストを含む見出しを追加できます。

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

ピッカーコンポーネントはこれを提供していますか、それとも簡単に追加できますか？

Answer 1

RNのPickerコンポーネントでは、これをそのまま使用することはできません。非常にカスタマイズ可能なPickerを使用する場合は、https://github.com/sohobloo/react-native-modal-dropdownを使用することをお勧めします。 renderSeparatorと呼ばれるAPIの小道具があります。あなたの目的に合わせて簡単に使うことができると思います。

Answer 2

ピッカー項目リストにセクションを作成するかどうか不明です。あなたができることは、選択した行を追加することです。

IOS

あなたはPickerコンポーネントのitemStyle小道具を追加することができます。 たとえば、選択した要素に罫線を追加することができます。ここで

私はAndroidの

を

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

をやったものですあなたは、Android hereのための解決策を見つけることができますが、私はそれをテストしたことがありません。そして、このソリューションは、アプリ内のすべてのピッカーのスタイルを追加します。それがあなたが望むものなら、それはクールです。

-

見出しについて、私は、要素existeにビルドのこの種のわかりません。 Picker.Itemが存在するので、Picker.Headerなどを持っているといいですが、私はこのような文書やインターネットを見つけたことはありません。 私が助けることができるものを見つけたら、ここに載せます。

希望すると便利です。