- ドロップダウンメニューの作り方が分からない
とドロップダウンメニューを作りたいと思っている方向けの記事になっています。
記事を読むことで、このようなドロップダウンメニューを作ることができます。
1. 概要
今回は、react-native-dropdown-pickerライブラリを使ったドロップダウンメニュー実装法王について紹介していきます。
react-native-dropdown-pickerライブラリ
react-native-dropdown-pickerライブラリは、ドロップダウンメニューを簡単に作成でき、単一選択や複数選択機能、検索ボックス機能を備えている多機能なライブラリです。下記にgithubのリンクを貼っておきます。
react-native-dropdown-picker
2. インストール方法
下記のコマンドを実行してreact-native-dropdown-pickerライブラリをインストールします。
|
1 |
$ npm install --save react-native-dropdown-picker |
3. 使い方
3.1 import
‘react-native-dropdown-picker’ライブラリから「DropDownPicker」コンポーネントをインポートします。
|
1 |
import DropDownPicker from 'react-native-dropdown-picker'; |
3.3 プロパティ
本ライブラリを使う時に設定するプロパティを一部紹介します。
＜DropDownPicker＞のプロパティ
| items | ドロップダウンメニューの選択欄に追加したい情報 |
| style | ドロップダウンのスタイル |
| labelStyle | ドロップダウンメニューのラベルのスタイル |
| containerStyle | ドロップダウンメニューの外側部分を調整 |
| dropDownStyle | ドロップダウンメニューの選択欄のスタイル |
(※私自身で確かめただけですので、参考程度でお願いします。)
| placeholder | デフォルト値がnullまたは空の配列である場合に、デフォルト値を設定する |
| placeholderStyle | デフォルト値のスタイル |
| activeLabelStyle | アクティブ(選択中)のラベルのスタイル |
| multiple | trueに設定すると、複数のアイテムを選択可能 |
| searchable | 特定のアイテムを検索するための検索ボックスを表示 |
4. 実装
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; import DropDownPicker from 'react-native-dropdown-picker'; export default class App extends React.Component { constructor(props) { super(props); this.state = { countries: [] }; } render() { return ( <View style={styles.container}> {/* 単一のアイテムを選択 */} <DropDownPicker items={[ {label: 'soccer', value: 'soccer'}, {label: 'baseball', value: 'baseball'}, {label: 'swimming', value: 'swimming'}, {label: 'basket', value: 'basket'}, {label: 'Valley', value: 'Valley'}, ]} labelStyle = {{ fontSize: 18, textAlign: 'center', }} containerStyle={{height: 40}} style={{backgroundColor: 'hsla(0, 0%, 0%, 0.1)'}} dropDownStyle={{backgroundColor: 'hsla(0, 0%, 0%, 0.05)'}} onChangeItem={item => this.setState({ country: item.value })} placeholder = "スポーツを選択してください" placeholderStyle = {{ fontWeight: 'bold', textAlign: 'center' }} activeLabelStyle = {{color: 'red'}} /> {/* 項目を選択中の時は、テキストを表示 */} <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}> {this.state.country!=null ? <Text style={{fontSize: 32}}>"{this.state.country}"を選択中</Text> : <Text></Text> } </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 80 }, }); |
5. まとめ
簡単にドロップダウンリストが作れてしまうライブラリです。また、「react-native-dropdown-menu」ライブラリでもドロップダウンリスト作ることができ、こちらもおすすめです。
