[React Native] フォントサイズが異なる文字列を下揃えする方法

Flexboxは、Webサイトにおけるコーディングではおなじみのレイアウトモデルで、縦軸や横軸の単一軸に整列させるものだ。React Nativeのレイアウトでも、Flexbox概念を用いて成形する。

そしてレイアウト用コンポーネントには、あらかじめFlexboxが定義された状態になっている。HTMLにあたるブロックレベルエレメントやインラインレベルエレメントという概念はなく、displayプロパティが存在しない。そして、すこし特徴を感じるのが、レイアウト用コンポーネントは、縦軸に整列するflex-direction: column;が与えられている点だろう。

さて、以上のことを踏まえて主題の文字列を下揃えにする方法であるが、この程度のことではまってしまったので自身の備忘録かたがた、それを共有したい。

やりたいこと

表現すべきレイアウトは、文字サイズの異なる文字列を下揃えにするものだ。下辺を揃え、上辺が凹凸になる状態を表現したい。

React Nativeのレイアウトモデルは、Flexboxだった。しかも初期時は、縦軸に整列するflex-direction: column;だった。

したがって、まずやることは横軸にすること。flex-direction: row;で横に整列させる。続いて縦軸に関する指定を担うalign-items: baseline;で、文字列をベースラインに沿うようにする。

<View style={{ flexDirection: 'row', alignItems: 'baseline',　}}>
  <Text style={{ fontSize: 40, }}>12</Text>
  <Text style={{ fontSize: 14, }}>時間</Text>
  <Text style={{ fontSize: 40, }}>00</Text>
  <Text style={{ fontSize: 14, }}>分</Text>
</View>

しかし…

しかしAndroidで、下揃えにならない。

左がAndroidで、右がiPhoneだ。下揃えされていないことがわかる。見た感じ行の高さによるもののようだから、lineHeightやtextAlignVerticalを試みたが見込めなかった。

解決法

やむを得ず<Text/>内に<Text/>を展開することで着地することにした。

<Text style={{ fontSize: 14, fontWeight: 'bold', }}>
  <Text style={{ fontSize: 40, }}>40</Text>時間<Text style={{ fontSize: 40, }}>50</Text>分
</Text>

HTMLコーディングにおける<p/>内の<span/>のような装いになっている。これならば親<Text/>の行の高さは、文字サイズが大きいものと等しくなり、ベースラインに沿うことになったわけだ。

このあたりの仕様は、Webブラウザそのままで安心できる。

まとめ

フォントサイズが異なる文字列を下揃えする方法の紹介だった。

<Text/>内に<Text/>を展開することで、当該件は着地することにしたが、それでもまだ問題がある。

それは<Text/>で余白を調整できない点だろう。<p/>内の<span/>では、span要素でも余白を与えることができたため、そのようなことで悩むことはなかったのだが、React Nativeでは工夫が必要らしい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。