会津ラボ

React NativeのルーターライブラリのReact Navigationやreact-native-router-fluxを使えば、ページ遷移を再現することができる。またタブ切り替えだったり、スタック式に積み重ねるタイプのUIも備えている。しかし横スライドするような表現には向いていないように思う。 実際に構築しようとするならば、スクリーン数に応じてルーターを定義するか、ルーターパスを参照するようなことを思い及ぶ。しかしスライド数が可変だった場合の対応に困るし、都度定義するようだと運用を考慮するとナンセンスだ。 このエントリーでは、横スライドするページの作り方を紹介したい。 はじめに 横スライドするページとは、複数スクリーンにわたって横に遷移している様を表現しているコンテンツだ。たとえばアンケートページや回答ページなどに見られる造りで、スクリーン毎にアクションを起こしてもらうようなシーンに使われる。 作り方 まずはソースコードで確認していこう。 上記は、横スライドするページに関するソースコードだが、見通しが悪くなる記述はすべて削除している。その点、容赦いただきたい。特にスタイルシートは一部を除いて、すべて削除しているから、脳内で良しなに置換しながら眺めてほしい。 さて前述では横スライドのことを「遷移している様」と表現しているが、実際には横スクロールで遷移している様を再現する。そのために必要なのが<FlatList/>だ。 <FlatList/>は、リストをレンダリングするためのUIコンポーネントで、クロスプラットフォームに対応している。 <FlatList/>のdata propsに与えた配列数に応じて、renderItem propsのコンポーネントが複数列レンダリングされる。 レンダリングされた要素には、keyExtractor propsでKeyを付与する。このときインデックス値だけを与えるのは悪手とされているから、なにかしらの文字列を含めると良いだろう。 そしてhorizontal propsによって横並びにする。 scrollEnabled propsにfalseを与えると、スクロールを禁止できる。横スライドするページを表現するには必要な設定だろう。この場合、ボタンの押下によってスライドすることが考えられる。 FlatListコンポーネントのscrollToIndex({index: インデックス値})を実行するとインデックス値の要素がビュー領域にスクロールしてくるものだ。このscrollToIndex()メソッドにアクセスするためref propsで<FlatList/>への参照先を定義しなければならない。 あと、ひと工夫で、renderItem propsでレンダリングされるコンポーネントのトップレベル要素は、コンテンツ量に応じて縦スクロールするように<ScrollView/>などを配置したいところだ。サンプルソースコードの<Content/>は、<ScrollView/>と<SafeAreaView/>をラップしたものだ。 この縦スクロールの配慮で、ひと手間が発生する。たとえば縦長コンテンツの最下部にあるNextボタンで次ページに横スライドして、Prevボタンで前ページに横スライドすると、その時点のスクロールビューは最下部状態のままになっている。これは再読み込みということではないから仕方のないことなのだが、前ページに戻って最下部状態というのは、いささか不自然感が否めない。 これに対処するため、scrollToPosition(0, 0, false)の実行でカレントページを最上部にスクロールさせたうえで、横スクロールを実施したというわけだ。このscrollToPosition()メソッドにアクセスするため<Content/>にもref propsで参照先を定義している。 まとめ 横スライドするページの作り方の紹介だった。 scrollToIndex()について伝えたとおりインデックス値を与えれば、対象インデックスページにスライドする。この横スライドには、デフォルトでアニメーションが付与されている。アニメーションを廃止して俊敏にスライドしたい場合には、scrollToIndex({animated:false,index:0})って具合にanimatedプロパティが設けられている。スライド感を無くしたいときに使ってみても良さそうだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

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 吹き出し」などで検索すると、それらしい情報が得られるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。