React Nativeのドロップダウン：ライブラリあり・なし
React Nativeドロップダウンガイド
React Nativeのドロップダウン：Modal + FlatListで作る | We.Inc
ModalとFlatListを使ってライブラリなしでReact Nativeのドロップダウンを作るか、コミュニティ版のPickerを使う方法を解説します。コピーできるコード、ライブのWebプレビュー、props表付きです。
React Nativeのコアコンポーネントには、ドロップダウンやセレクトがありません。Pressableのトリガー、Modal、選択肢のFlatListを組み合わせて自作するか、AndroidとiOSのネイティブピッカーをラップするコミュニティパッケージ@react-native-picker/pickerをインストールします。検索、独自の行デザイン、全プラットフォームで同じ見た目が必要なら自作しましょう。
選択肢の一覧を表示する3つの方法
- Pressable + Modal + FlatList
- 不要、すべてコア
- 独自のスタイル、検索、長いリスト
- @react-native-picker/picker
- npm install @react-native-picker/picker
- プラットフォーム標準のピッカーの見た目
- ActionSheetIOS
- 不要、iOSのみ
- iPhoneでの短いアクション一覧
下のプレビューは、後半のReact Nativeコードと同じロジックをWeb要素で描画したもので、ここで試せます。リストを開き、絞り込み、行を選び、Escapeで閉じてみてください。その後、コンポーネントをコピーし、WebのタグをView、Text、Pressable、Modal、FlatListに置き換えます。
- Pressableが現在の選択肢を表示し、何も選ばれていないときはプレースホルダーを表示します。
- 押すとopenフラグが立ち、Modalが表示されます。
- Modalの中では、FlatListが選択肢ごとに1つのPressableの行を描画します。
- 行をタップすると値を渡してonChangeが呼ばれ、フラグがfalseに戻ります。
- onRequestCloseがAndroidの戻るボタンを処理するので、リストはいつでも閉じられます。
- ModalにはonRequestCloseハンドラーを付けましょう。ドキュメントでは、AndroidとApple TVで必須とされています。
- Modalにtransparentを設定し、暗くした背景を自分で描くと、後ろの画面が見えたままになります。
- 選択肢の値を使ってkeyExtractorを設定すると、絞り込みが変わっても行のキーが安定します。
- トリガーにaccessibilityRole="button"を付け、選択中の行はaccessibilityStateのselectedでマークしましょう。
- FlatListの上に検索欄がある場合は、keyboardShouldPersistTaps="handled"を渡しましょう。こうすると、1回のタップでキーボードが閉じるだけでなく行が選ばれます。
よくある質問
React Nativeに組み込みのドロップダウンはありますか？
ありません。コアコンポーネントのページには、ユーザーインターフェースのコントロールとしてButtonとSwitchが載っているだけで、セレクトはありません。既製のネイティブセレクトが必要なら、コミュニティパッケージ@react-native-picker/pickerをインストールしてください。
AndroidでPickerをドロップダウンのように見せるには？
Pickerにmode="dropdown"を設定します。このpropはAndroid専用で、デフォルトはモーダルのリストを開く"dialog"です。iOSでは、代わりにネイティブのホイールが表示されます。
選択肢をタップしてもキーボードが閉じるだけなのはなぜですか？
スクロールするリストではkeyboardShouldPersistTapsのデフォルトが"never"のため、フォーカス中の入力欄の外を最初にタップするとキーボードが閉じるだけで、行にはタップが届きません。FlatListでこのpropを"handled"に設定してください。
React Nativeのドロップダウンに検索を追加できますか？
はい、自作版なら可能です。stateに検索文字列を持ち、Modalの上部にTextInputを置き、絞り込んだ配列をFlatListのdata propに渡します。
自作すべきとき
- コミュニティ版のPickerは最も手早い方法で、各プラットフォームでネイティブらしく見えます。裏を返せば、AndroidとiOSで見た目が異なります。どこでも同じリスト、絞り込み欄、アイコン、2行の行が必要なデザインなら、Modal版なら約50行で完全に制御できます。
- FlatListは画面付近の行だけを描画するため、国やタイムゾーンのリストもModal内で高速に動きます。ScrollViewの中で長い配列を単純にmapすると、すべてを一度に描画してしまいます。
自作セレクトのアクセシビリティ
- スクリーンリーダーは、Pressableがリストを開くことを推測できません。accessibilityRole="button"と、項目名と現在の値を含むラベルを付け、リスト内の選択中の行にはaccessibilityStateでselected: trueを設定しましょう。
- リストを閉じたら、ユーザーをトリガーに戻すべきです。ModalのonRequestCloseをつないだままにし、戻るジェスチャーを使わない人のために、目に見える閉じるボタンも追加しましょう。
ドロップダウンで重要なprops
自作ドロップダウンで使うコアのprops
- Modal
- リストを表示または非表示にする（デフォルトはtrue）
- Modal
- 画面全体を覆う代わりに、透けた背景の上に描画する
- Modal
- animationType
- "none"（デフォルト）、"slide"、"fade"
- Modal
- onRequestClose
- Androidの戻るボタンで呼ばれる。Androidでは必須
- FlatList
- data / renderItem
- 選択肢の配列と、各行を描画する関数
- FlatList
- keyExtractor
- 選択肢ごとに一意のキーを返す
- FlatList
- keyboardShouldPersistTaps
- "never"（デフォルト）、"always"、"handled"
- Picker
- Androidのみ："dialog"（デフォルト）または"dropdown"
コピーして使えるドロップダウンのコード
Pressable、Modal、FlatListで作るドロップダウン
依存関係はありません。値は親が持ち、コンポーネントはonChangeで選択を伝えるだけです。
コミュニティ版のPicker
npm install @react-native-picker/pickerでインストールします。onValueChangeは項目の値とその位置を受け取ります。
- トロント
- バンクーバー
- モントリオール
- カルガリー
- オタワ
- ハリファックス
- ウィニペグ
- ビクトリア
ドロップダウンのプレビュー
React NativeコンポーネントのWeb版代用品です。開く、絞り込む、選ぶという同じロジックをHTMLで描画し、ここで動くようにしています。
都市
選択してください...
都市を絞り込む
その条件に一致する都市はありません。
リストを閉じる
選択した値：{v}
まだ何も選択されていません。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る