今回はReactNativeで、日付選択のUI「DatePicker」を実装する方法を紹介する。
なお、本記事で紹介するDatePickerはiOSでのみ使用できるもので、DatePickerIOSコンポーネントを使う。
Contents
DatePickerIOSコンポーネントのインポート
import React, { Component } from 'react'; import { View, DatePickerIOS } from 'react-native';
state変数の初期化
ユーザーがDatePickerを使って選択した日付は、state変数で管理する。
import React, { Component } from 'react'; import { View, DatePickerIOS } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { date: new Date() }; } }
DatePickerの表示
import React, { Component } from 'react'; import { View, DatePickerIOS } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { date: new Date() }; } render() { return( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }}> <DatePickerIOS style={{width: 320}} date={this.state.date} onDateChange={date => {this.setState(date)}} mode={'date'} /> </View> ); } }
DatePickerIOSでは幅を指定しないと正しく表示されないので、style属性で幅を指定する。
今回は絶対値で320を指定した。
date属性には初期値として設定したstate変数を指定。
state変数の更新は、onDateChange属性で行う。
最後にDatePickerのタイプをmode属性で指定する。
今回はdateを使用するが、modeは以下の4つから選択することができる。
date

time

datetime

countdown
