Day25 iOS と Android 別の日付指定とプルダウン

引き続き最終章です。

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 3/3 【プラスボタン編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 3/3 【プラスボタン編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

もくもくやっていきます。

プルダウンメニューを作ろう

今日はここからです。

・`INITIAL_STATE.tripDetail.country` (“Select country”)
・”China”
・”UK”
・”USA”
の4種類の選択肢を用意しているということになります。それでは動作確認してみましょう。

プルダウンが表示されました!

この調子で日付選択用のプルダウンメニューも作っちゃいましょう。

はい!

日付選択のListItemはあまり国選択のListItemと変わらないですが、Pickerはちょっと違って日付選択用のPickerがあるのでそちらを使います。また日付選択用のPickerはちょっと複雑で、iOS用とAndroid用で共通ではないので別々に作ります。

あー、iOS も Android も両方使ったことあるからわかる!日付の選択って、iOS は、ぐるぐるーーっていうので、Android はなんか普通のだよね。

開発時に OS の差分吸収できちゃうなんて、React Native は柔軟だなー。

まずはターミナルでAndroid用の日付選択Pickerを`$ npm`します。

$ npm install react-native-datepicker
$ npm install

日付のフォーマットは大変だなー。これはしゃーないよね。

ではここで動作確認してみましょう。

Date: From が追加できました!上の Country を開くと、ちゃんと Date が閉じます。

項目欄のListItemタグとプルダウンメニュー描画用の`renderDateToPicker()`関数の両方を書き終えたら、動作確認してみましょう。

最後に Date: To が追加されました!To を開くと、 From で指定した日付が初期値に指定されます。よいです。

これでプルダウンメニューは全部完成しました!

わーい!

地図を表示しよう

やりましょう!

では動作確認してみましょう。

国を指定すると、背景に地図が表示されるようになりました!!

今日はここまで!!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください