2018年3月29日

プログラミング

DatePickerIOSで日付を設定する 【これからはじめるReact Native】

目次

  1. はじめに
  2. DatePickerIOSを使ってみる
  3. まとめ

はじめに

前回はTouchableOpacityコンポーネントを使い、カウントアップするサンプルを作ってみました。
今回は日付・時刻入力の為のDatePickerIOSコンポーネントをご紹介します。

このコンポーネントは名前の通り、iOS用のコンポーネントです。
iOSユーザーの方は経験されたことがあると思いますが、このような動きをするコンポーネントです。
DatePicker

ちなみに、Androidで実行するとこのようになります。
 2018-02-28 22.44.38.png (34.7 kB)

DatePickerIOSを使ってみる

では、今回のコードを見ていきます。

コードの解説

では、コードの詳細を見ていきます。

import { DatePickerIOS, View, StyleSheet } from 'react-native';

こちらでDatePickerIOSコンポーネントをインポートしています。

  state = { chosenDate: new Date() };

Dateクラスからnewでインスタンス生成することで、現在時刻を取得することができます。
その値をstatechosenDateに設定しています。

  setDate = (newDate) => {
    this.setState({
      chosenDate: newDate
    })
  }

後ほど見ますが日付が変更されたときに発動するメソッドです。
アロー関数でstatechosenDateに渡ってきたnewDate(日付情報)を設定しています。

<DatePickerIOS
  date={this.state.chosenDate}
  onDateChange={this.setDate}
/>

DatePickerIOSコンポーネントを使用しています。
dateは表示する日付を指定するpropsです。
ここではstatechosenDateが設定されます。

onDateChangeは日付に変更があったとき(このピッカーが回されたとき)に発動するイベントです。
先程のsateDateメソッドを呼び出しています。

その他のprops

他にも日付の最小最大値を設定可能な、minimumDatemaximumDateもあります。
いつまでも未来日付を設定できては困る場合や、過去日は指定できなくする場合などに使用します。
また、modeを指定することで、日付単位のピッカーとするか、時刻単位でのピッカーにするか指定できます。
propsの値としては、datetimedatetimeが設定でき、今回のように指定がないデフォルトの場合はdatetimeとなります。

日付に関して設定した場合、minuteInterval を設定することで、何分刻みにピッカーを表示するかも指定可能です。

Image uploaded from iOS.png (78.2 kB)
15分刻みでTime表示にしてみた際の画面

POINT!!

今回のコードをそのまま使った場合、Androidユーザーに同じコードを提供するとエラーが出たままとなってしまいます。
そういった場合はOSを判定し、iOSと判定された場合にのみ今回のDatePickerIOSを使用すべきです。
そんなときはif (Platform.OS === 'iOS')のような形でPlatform.OSを使ってOS判定をしてみてください。

まとめ

今回はDatePickerIOSコンポーネントの使い方、また補足でOSの判定方法について解説しました。
React NativeはiOS、Androidどちらも同時に開発が可能ですが、やはりOSに特化したコンポーネントや処理というのは発生してきます。
そんなときには上手くOS判定を行い、どちらも対応できるようにしていくのが良いでしょう。

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP