【React Native】iOS専用のDatePickerを実装する

今回はReactNativeで、日付選択のUI「DatePicker」を実装する方法を紹介する。
なお、本記事で紹介するDatePickerはiOSでのみ使用できるもので、DatePickerIOSコンポーネントを使う。

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