会津ラボ

React Nativeによるアプリ開発において、UIコンポーネントの導入は珍しいものではない。むしろポピュラーとまで感じるほどではないだろうか。なかでもNativeBaseが、もっとも高名なUIコンポーネントだといえる。 そんなNativeBaseのコンポーネント群に日付選択を手助けするものがある。DatePickerだ。 NativeBaseのDatePickerコンポーネントは、IOSとAndroidのプラットフォームを判定して専用のDatePickerをレンダリングしてくれる。IOSならばDatePickerIOSコンポーネントで、AndroidならばDatePickerAndroid APIが呼び出されるわけだ。 NativeBaseのDatePickerコンポーネントの実装は、公式ドキュメントのとおり記述すれば、なんの問題もなく配置できることだろう。ところがDatePickerコンポーネントの日付表記が英語圏のものと気づいて戸惑うかもしれない。 このエントリーでは、NativeBaseのDatePickerコンポーネントの日付表記を日本語形式フォーマットする方法を紹介したい。 解決法 さっそく解決法を示そう。サンプルソースコードとして公式ドキュメントのものを拝借して、そこに追記している。では下記ソースコードを確認してほしい。 追記した箇所は、2行だ。 まずソースコード上部にimport moment from ‘moment’;としてMoment.jsをインポートしている。Moment.jsは日付時刻操作ライブラリで、フォーマットするときなどに使う。 つづいて<DatePicker />にformatChosenDate={ date => moment(date).format(‘YYYY年MM月DD日’) }としてformatChosenDate propsを用意している。これは日付フォーマット用のpropsで、DatePickerコンポーネント内で参照されている。もしformatChosenDate propsが存在しなければ英語圏の日付表記が適用される仕組みだったわけだ。 まとめ NativeBaseのDatePickerコンポーネントの日付表記を日本語形式にフォーマットする方法の紹介だった。 そもそも公式ドキュメントにformatChosenDate propsの記述がない。DatePickerコンポーネントの実ソースコードを眺めていて発見したものだ。 もしまだ実装の時でないならば、頭の片隅に入れておいてほしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

Flexboxは、Webサイトにおけるコーディングではおなじみのレイアウトモデルで、縦軸や横軸の単一軸に整列させるものだ。React Nativeのレイアウトでも、Flexbox概念を用いて成形する。 そしてレイアウト用コンポーネントには、あらかじめFlexboxが定義された状態になっている。HTMLにあたるブロックレベルエレメントやインラインレベルエレメントという概念はなく、displayプロパティが存在しない。そして、すこし特徴を感じるのが、レイアウト用コンポーネントは、縦軸に整列するflex-direction: column;が与えられている点だろう。 さて、以上のことを踏まえて主題の文字列を下揃えにする方法であるが、この程度のことではまってしまったので自身の備忘録かたがた、それを共有したい。 やりたいこと 表現すべきレイアウトは、文字サイズの異なる文字列を下揃えにするものだ。下辺を揃え、上辺が凹凸になる状態を表現したい。 React Nativeのレイアウトモデルは、Flexboxだった。しかも初期時は、縦軸に整列するflex-direction: column;だった。 したがって、まずやることは横軸にすること。flex-direction: row;で横に整列させる。続いて縦軸に関する指定を担うalign-items: baseline;で、文字列をベースラインに沿うようにする。 しかし… しかしAndroidで、下揃えにならない。 左がAndroidで、右がiPhoneだ。下揃えされていないことがわかる。見た感じ行の高さによるもののようだから、lineHeightやtextAlignVerticalを試みたが見込めなかった。 解決法 やむを得ず<Text/>内に<Text/>を展開することで着地することにした。 HTMLコーディングにおける<p/>内の<span/>のような装いになっている。これならば親<Text/>の行の高さは、文字サイズが大きいものと等しくなり、ベースラインに沿うことになったわけだ。 このあたりの仕様は、Webブラウザそのままで安心できる。 まとめ フォントサイズが異なる文字列を下揃えする方法の紹介だった。 <Text/>内に<Text/>を展開することで、当該件は着地することにしたが、それでもまだ問題がある。 それは<Text/>で余白を調整できない点だろう。<p/>内の<span/>では、span要素でも余白を与えることができたため、そのようなことで悩むことはなかったのだが、React Nativeでは工夫が必要らしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

Webアプリで吹き出しUIをコーディングするには、CSSの疑似要素を工夫して三角形を形成する。ところがReact Nativeでは疑似要素をサポートしていない。というのもReact Nativeのスタイルの適用方法は、オブジェクト形式で定義しなければならないからだ。 そもそもネイティブアプリ作成におけるレイアウトで、疑似要素っぽいことを求めるシーンがあるのか知らないが、React NativeのCSS適用方式では、それを再現することができない。 それでもデザイン要件で、吹き出しUIをコーディングしなければならないこともある。 このエントリーでは、React Nativeコンポーネントに吹き出しUIをつくる方法と、そのコーディングサンプルを紹介したい。 React Nativeにおける疑似要素 まず疑似要素について言及しておこう。CSSの疑似要素とは、ターゲット要素に対して擬似的に仮想の要素を配し、スタイル適用を可能にしている。たとえば::beforeならば、ターゲット要素の先頭子要素として要素が挿入される。::afterならば、ターゲット要素の末尾子要素として要素が挿入される。 このように擬似要素として定められた特定の場所に仮想の要素が挿入され、さまざまな装飾に活用されている。 ところがすでに述べたとおり、React Nativeのスタイル適用方法では、これをサポートしていない。疑似要素はサポートしていないのだが、再現はできる。 疑似でなければよいのだ。 吹き出し三角形のしくみ React Nativeで吹き出しUIのコーディングサンプルを示す前に、吹き出しUIたらしめる三角形オブジェクトのCSSを確認しておきたい。 ここでポイントとなるプロパティは、width,height,borderが三角形を形成している。ボックスモデルの概念だとcontent領域の外側にpadding領域があって、border領域、margin領域をもつ。 上記のCSSを見ると、width,heightは0pxで、borderは上、右、左辺が10pxになっている。つまりcontent領域は潰して、border領域でサイズを得ていることがわかる。 上辺のボーダー幅が10px、左右辺ともにボーダー幅が10px、色を透明にすることで、上辺ボーダーだけ残って三角形に見えるという理屈だ。この場合の疑似要素サイズは、横幅20px、縦幅10pxになる。下辺ボーダーを定義していないため、上辺ボーダー幅しか保持せず縦幅は10pxというわけだ。 吹き出しUIのコーディングサンプル それでは本題の吹き出しUIのコーディングサンプルをご覧いただこう。 上向き吹き出し 右向き吹き出し 下向き吹き出し 左向き吹き出し まとめ React Nativeコンポーネントに吹き出しUIをつくる方法と、そのコーディングサンプルの紹介だった。 Webコンテンツのコーディングとの相違は、疑似要素ではなく空要素にスタイルを当てるという一点くらいなもので、難しさはないはずだ。三角形を形成するアプローチはCSSコーディングそのものでボーダーを工夫して再現する。 つまりそのアレンジ方法もWeb用エントリーのものから得ることができるということだ。「CSS 吹き出し」などで検索すると、それらしい情報が得られるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。