-
React hooksのuseStateにコールバックをセットするには
React 16.8でReact hooksが導入されて久しい。 いまとなってはステートレスコンポーネントがReactコンポーネント作成のデファクトスタンダードになっている。すでにいくつかのクラスコンポーネントのライフサイクルは非推奨になっているものもある。 React hooksの導入に際して、まず接点があるであろうメソッドはuseState()だろうか。これはthis.setState() として状態を更新していたもののhook版と認識してもらえればよい。馴染みのあるthis.setState()とReact hooksのuseState()は、使いどころこそはおよそ同じであるが、this.setState()にできて、useState()にできないこともある。 それはコールバックの定義だ。 このエントリーでは、ステートレスコンポーネントにおける状態更新のコールバックについて共有したい。 まず、クラスコンポーネントは？ ステートレスコンポーネントにおけるコールバックを示す前に、クラスコンポーネントの例を確認してもらおう。クラスコンポーネントであるから、もちろんthis.setState()だ。 this.setState()の第一引数がステートオブジェクト、第二引数がコールバック関数だ。この例では、無名関数を定義しているが、任意の関数をセットできる。 では、ステートレスコンポーネントだと？ 前述したとおり、useState()だとコールバックを定義できない。useState()は、状態値の定義と状態を更新するための関数を分割代入するだけのもので、this.setState()のようにコールバックを定義する機能は備わっていない。ではステートレスコンポーネントで状態が更新されたことを捕捉するにはどうしたらよいのだろう。 ステートレスコンポーネントの場合は、React hooksのuseEffect()を使う。 useEffect()は、ライフサイクルのcomponentDidMountやcomponentDidUpdate、componentWillUnmountに類似したものと認識してもらえればよい。 componentDidUpdateライフサイクルでは、現在のステートと更新されるステートを比較して何らかの処理を実行するような場合に使っていた。useState()でもこれを再現させれば良さそうだ。 useEffect()の第二引数に[isVisible]を渡している。これは現在のステートと更新されるステートを比較して、もし同値であればuseEffect()の第一引数の無名関数をスキップするというものだ。 果たして、ステート更新のコールバックを再現することができた。 まとめ ステートレスコンポーネントにおける状態更新のコールバックに関する共有だった。 useEffect()の第二引数に渡したステート変数を観測することで、コールバック関数を再現したわけだが、このソースコードの例では、コンポーネントがマウントされたタイミングでも実行されてしまうはずだ。そのようなときは無名関数内でステート値を厳密にチェックするようにしてほしい。 このたび言及した方法のほかに「use-state-with-callback」なるパッケージがあるようで、これでもコールバックができるらしい。わたしは試していないが、期待した機能は保有している様子だ。トライしてみても良いだろう。
-
アンカーリンクの遷移先が隠れる…。追従ヘッダーの重なりを回避するCSS
サイト制作で縦長デザインを採用するとき、動線の確保を配慮しなければならない。スクロールすることで現在地を見失い、迷子になることが考えられる。いまどこにいて何を閲覧しているか分からなくなるというものだ。 そのような対策のひとつに、ヘッダーをウインドウ上部に固定配置して、いかなるスクロール位置にいてもメニューにアクセスできるようする、というものがある。このメニューをアンカーリンクにすることでユーザビリティに配慮したサイトを見たことがあるかもしれない。たとえば、ブログなど文章系コンテンツにしても目次を設けて対象セクションに遷移するものもある。 このように縦長サイトにおいて、追従ヘッダーとアンカーリンクは比較的セットで実装されることがあるわけだが、ヘッダーが固定されていることでアンカーリンクの遷移先が隠れてしまう問題に遭遇する。 このエントリーでは、アンカーリンク遷移先に追従ヘッダーが重ならないようにするCSSを紹介したい。 問題 解決 See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. 追従ヘッダーのメニューがアンカーリンクになっている。アンカーリンクは各種見出しがターゲットで、クリックするとページ内遷移する。 見出しに追従ヘッダーが重なることなく表示されればOKだ。 ここで注目すべきは、CSSのscroll-padding-topプロパティだ。scroll-padding-topプロパティは、スクロールポート上部にオフセット値を付与できる。スクロールポートとは、スクロールバーが発生している領域だと認識してもらえば差し支えない。 サンプルソースコードではscroll-padding-top: 60px;として、追従ヘッダーの高さをオフセットするようにしている。 まとめ アンカーリンク遷移先に追従ヘッダーが重ならないようにするCSSの紹介だった。 元来、アンカーリンク遷移先の要素に上余白を与えて擬似的にオフセットを作っていたことを考えると違和感なく理解できるものだと思う。ただしIE,Edgeに関しては、部分的なサポートに留まっている。要件によっては、しっかりサポート状況を確認してもらいたい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
NativeBaseのDatePickerコンポーネントの日付表記をフォーマットする方法
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コンポーネントの実ソースコードを眺めていて発見したものだ。 もしまだ実装の時でないならば、頭の片隅に入れておいてほしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
[React Native] フォントサイズが異なる文字列を下揃えする方法
![[React Native] フォントサイズが異なる文字列を下揃えする方法](https://wordpress.aizulab.com/wp-content/uploads/2019/09/react-native-text-baseline.png)
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では工夫が必要らしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
[React Native] 吹き出しUIの作り方とコーディングサンプル
![[React Native] 吹き出しUIの作り方とコーディングサンプル](https://wordpress.aizulab.com/wp-content/uploads/2019/09/react-native-balloon-stylesheet-sample.png)
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 吹き出し」などで検索すると、それらしい情報が得られるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
スクロールしてフェードインさせる！表示領域の侵入を判定する方法
縦長サイトはスクロール量が大変多い。目的のエリアに到達するまでに相当量スクロールしなければならないサイトもあるほどだ。ユーザーにとっては、わずらわしく非常にストレスのかかる行動であることは間違いない。 スクロールしていると退屈で通り過ぎてしまう、なんてこともあるだろう。リズミカルにスクロールしだすと止まらないものだ。これはサイトオーナーにとっては、もっとも回避しなければならないし、ましてや正しい情報が認知されずサイト離脱など阻止しなければならない。ユーザーとオーナーの双方にとって損害といえる。 縦長サイトでスクロールさせること自体に問題はなく、成功しているサイトだって少なくないが、退屈させるのがいけないのだ。そんなスクロール時の退屈の方策に、アニメーションエフェクトを加えて飽きさせないものがある。 このエントリーでは、スクロール時の表示領域の侵入をトリガーにしてフェードインするテクニックを紹介したい。 はじめに まず表示領域というものに言及しておこう。ここでいう表示領域は、いわゆるビューポートのことで、現在あなたがブラウザ内に視える領域のことを指す。スクロールしないと視えない領域はビューポート外ということだ。 この表示領域に侵入したか否かを判定するアイデアとして、スクロールをトリガーにして、ターゲット要素がwindowオブジェクトの下辺を超えたら処理するというものがある。あなたも目にしたことがあるのではないだろうか。 しかしこの手法だと、イベントコール後もイベントリスナを削除しない限り、ずっとスクロールイベントが発生することになる。パフォーマンスとしていかがなものか。 そこでこのような要件に最適なIntersectionObserver APIを使う。 IntersectionObserver APIについて IntersectionObserver APIとは、ターゲット要素が表示領域と交差するたび実行されるというものだ。交差というのは、表示領域の一辺にターゲット要素の一辺が被ったか否かということで、一般的にスクロールすれば表示領域の下辺とターゲット要素の上辺が交差することになる。もちろん全面的に重なった状態も交差に該当する。 すなわち、windowオブジェクトの下辺を超えたら処理するなどの実装において、もっとも優れた代替案になるだろう。 IntersectionObserver APIの詳解はMDNで確認してもらいたい。 表示領域の侵入したらフェードインするデモンストレーション See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. まとめ 表示領域の侵入を判定してフェードインするテクニックの紹介だった。 スクロールイベントが悪いわけもなく、パララックスサイトのような実装において、スクロール量を求める場合もある。ときと場合と要件で判断してもらうとよいだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
Dockerでvimを使う方法（Python有効化も）
オンプレのサーバにVimをインストールする際に、ビルド手順（主にconfigure内容）を忘れてググることが多いので自分の備忘録として残したいと思います。 また、一口にVimと言ってもVim8、NeoVimをyumやらaptやらでインストールするパターンと、ソースコードからコンパイルするパターンがあると思いますので、今回はDockerコンテナ上で以下の4パターンを試してみたいと思います。 Vim8をパッケージマネージャでインストールするパターン NeoVimをパッケージマネージャでインストールするパターン Vim8をソースからビルドしてPython2, 3を有効にしたパターン NeoVimをパッケージマネージャからインストールしてPython2, 3を有効にしたパターン Dockerコンテナのベースイメージは軽量化のためAlipneLinuxを使用していますがCentOSでもUbuntuでも手順はほぼ変わらないと思います。 1. Vim8 まずはVim8のみ、Pythonを有効にしていない状態であれば以下のように簡単にインストールすることができます。 Dockerfileを用意したらbuildコマンドを実行し、コンテナを起動します。 コンテナを起動したらvimを起動できることを確認します。 2. NeoVim 次にNeoVimを試します。こちらもVim8同様、簡単にインストールすることができます。 先ほどとほぼ同じ手順でNeoVimがインストールできます。 3. Vim8 + Python 次にプラグインを使用するためにPythonを有効化したVim8をインストールします。先ほどの方法でもPython3は有効になっているのですが一応Python2も有効にしてみます。Dockerfileは少し複雑になります。 まずVim8のソースコードをcloneするためのgitや、ビルドするためのgccなど必要なパッケージをインストールします。 その後、git cloneしてcdでディレクトリに移動してからビルドしますがDockerでは以下のようにRUN cd vimとしてもconfigureが実行できません。 Dockerはコマンド１つ毎にカレントディレクトリに戻りますのでcdした後に&&で続けてビルドを実行しないとカレントディレクトリに戻って実行してしまうのでエラーになります。 configureが終わったらmake installして完了です。 コンテナを立ち上げてVimを確認します。 Vimの確認は以下のコマンドです。 +pythonとなっているのでPython2, Python3が有効になっています。 Vimを起動して確認してみましょう。 ノーマルモードで以下のコマンドを実行して１が表示されればPythonは有効になっています。 4. NeoVim + Python 最後にNeoVim+Pythonを試します。Pythonをインストールし、pipでneovimパッケージをインストールするだけですので前述のVim8ほど複雑ではありません。 Python3のpipはneovimをインストールする前にupgradeしないと怒られるのでupgradeしてからneovim installとしています。 こちらもコンテナを起動して確認します。 NeoVimはヘルスチェックができるので起動後、ノーマルモードでヘルスチェックコマンドを実行しましょう。 Python2, Python3のどちらもOKとなっているので有効であることが確認できました。 まとめ DockerでのVimのインストール方法をまとめてみました。Dockerを使う場合はファイル共有にしてローカルのVimで開発するのでDocker上でVimを使用することは少ないのですが、Dockerfileを作成しておくことは無駄ではないかな、と思い作成してみました。 Docker上で開発を行うVimmerの役に立てれば幸いです。 今回作成したDockerfileはこちら。https://github.com/aizulab-igarashi/docker_vim
-
React Nativeの認証フローを考える
React Nativeのアプリ開発やReactのSPA開発において認証フローは、クオリティを左右する重要な要素であることは間違いない。 実際、検索結果には、認証フローに言及した記事や質問が投稿されていて関心の高さが伺える。その内容としては、ルーター設計における認証フローに関するものが多くを占めている印象だ。 そしてReact Nativeのルーター設計には、React Navigationやreact-native-router-fluxが使われるが、いずれもルーター・ナビゲーションライブラリであって認証ロジックを提供していない。すなわちルーターで良しなに対応するか、自作の認証ロジックをこしらえる必要がある。 このエントリーでは、React Nativeの認証フロー について考えてみたい。 そもそも… そもそもReact Navigationの公式ドキュメントに、認証フローに言及したページがある。これはナビゲーションロジックを駆使して認証コンポーネントとプライベートコンポーネントを振り分けるというものだ。 まったくもって理にかなう認証フローだと思う。 その内容で十分だと思うならば、そちらを参考にするのがよいだろう。ただし認証ロジックを提供するものではないことは理解しなければならない。 認証フローのデモンストレーション AppScreen.js AppNavigator定数がメインナビゲーションに該当する。認証後に表示されるコンポーネントだ。AppNavigatorをcreateAppContainer(…)にセットした上で、withAuthenticator(…)にセットする。withAuthenticatorは、高階コンポーネントになっていて条件によって別コンポーネントを返す。 withAuthenticator.js まずconstructor(props) {…}で認証トークンを取得済みか否かを確認する。その結果で認証コンポーネントかプライベートコンポーネントに振り分ける。 認証トークン取得済みであればprops.authenticate(true);を実行して、this.props.isAuthenticatedの状態を更新する。これによってif (isAuthenticated) return <Component />;のコンポーネントが返される。すなわちこれは、AppScreen.jsで定義したcreateAppContainer(AppNavigator)を参照する。 認証トークン未取得であればprops.signIn();を実行して、this.props.authStageの状態を更新する。これによってswitch (authStage) {…}のcase types.SIGN_IN:が該当する。したがってサインインコンポーネントが返される。 authentication.js Reduxのaction-creatorとaction-type、reducerをまとめている。いわゆるDucksというデザインパターンだ。 stateにはisAuthenticatedとauthStageを定義している。この状態を更新するためにaction-creatorのforgotPassword、signUp、signIn、authenticateがある。 forgotPassword、signUp、signInは、authStageの状態を担当し、action-typeの定数値に更新する。 authenticateは、isAuthenticatedの状態を担当し、真偽値を受け取って更新する。 まとめ React Nativeの認証フロー に関する内容だった。 この内容ではReact Navigationを使っているが、react-native-router-fluxであっても再現可能だ。AppScreen.jsのwithAuthenticator(…)にreact-native-router-fluxのルーターコンポーネントをセットすればよい。 ただこの認証フローにも悩みどころがある。 React Navigationかreact-native-router-fluxに関わらず、認証コンポーネントはナビゲーション管轄外になっていることで、ヘッダーが表示されない。認証画面などにもヘッダーが必要ならば、NativeBaseなどのUIコンポーネントでヘッダーUIを挿入したり、各コンポーネントもナビゲーション化しなければならない。 UIコンポーネントを使う手段は、ヘッダーUIに差異が発生するから却下だろう。ナビゲーション化は、せっかく振り分けたのに、どこかモヤモヤする。 素直にReact Navigationの認証フローに倣ったほうがよいのかもしれない。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
レスポンシブに対応したHTMLメールフレームワーク「MJML」でコーディングしてみる
HTMLメールのコーディングが難しいという声を聞く。わたしも同感だ。 Webコンテンツであれば、Webブラウザで表示されるようにコーディングをする。ところがHTMLメールのターゲットであるメールクライアントには、Webブラウザほど優れたレンダリングエンジンを積んでいないものもある。 つまりWebコンテンツのようにCSSコーディングができない。HTMLメール作成においては、だいたいはテーブルコーディングを行う。このような条件でメーラー依存を吸収してコーディングするというのは、骨が折れる。 このエントリーでは、メールクライアント間の依存を解消できるHTMLメールフレームワーク「MJML」を紹介したい。 MJMLについて MJMLは、HTMLメールを作成するHTMLメールフレームワークである。カスタムタグでコンポーネントベースに構成されていて、<mj-body>、<mj-section>、<mj-row>、<mj-column>などのセクショニング・コンテンツの要領で簡単にセマンティックコーディングできる。これらカスタムタグは公開用ビルドをすることでHTMLに変換される。 【MJML】 https://mjml.io/ 特徴 MJMLに触れてみる まずはMJMLを導入してみよう。 初期化 任意のプロジェクトフォルダにpackage.jsonがなければ以下コマンドで初期化すること。 導入 つづいて以下コマンドで、mjmlパッケージモジュールをインストールする。この時点でプロジェクトフォルダには、node_modulesとpackage.jsonが生成される。 作成 つづいてmjmlファイルを用意する。このサンプルではinput.mjmlとしたが、ファイル名は任意で構わない。 レンダリング つづいてHTMLにレンダリングする。 そもそも導入時のnodeパッケージは、ローカルのプロジェクトフォルダにインストールしたものだった。したがって、実行コマンドは./node_modules/mjml/bin/mjmlを参照しなければならない。 パスを設定すれば、プロジェクトフォルダ内でmjmlが可能になるとのことだが、わたしの理解が曖昧なため触れないでおきたい。 気になる場合は、mjml-cliのREADME.mdを参考にするとよい。 果たして、ターミナルにHTMLソースコードがレンダリングされただろうか。 アウトプット アウトプット方法についても触れておこう。以下コマンドでinput.mjmlをoutput.htmlにアウトプットしている。 まとめ レスポンシブ対応のHTMLメールフレームワーク「MJML」の紹介だった。 プログレッシブ・エンハンスメントが叫ばれて久しい昨今でもテーブルコーディングを行わざるを得ないHTMLメールであるが、MJMLを使うことでわざわざ煩わされることもない。 コンポーネントベースに構成されたカスタムタグは、その名称からおよその使い所を推測することが可能だろう。<mj-button>ならばボタンを担うタグという具合に、セマンティックコーディングの要領で記述することができる。 日頃HTMLに慣れ親しんでいるならば、ほとんど学習コストがかからず楽に導入できるはずだ。HTMLメール作成することがあればMJMLを使ってみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
React NavigationのcreateBottomTabNavigatorでヘッダーUIを表示する方法
React Navigationのルーティング設定で、ヘッダーUIとタブバーUIを含むとき、タブ切り替えナビゲーションを担うcreateBottomTabNavigatorを使う。 ところが、createBottomTabNavigatorではヘッダーUIが表示されない。 タブバーUIにおいて、ヘッダーUIが不要なケースがあるかもしれないからヘッダーコンポーネントを含めていないと思われる。しかしその一方でcreateStackNavigatorだとヘッダーUIが表示される。 感の鋭いひとは、気づいたかもしれない。createBottomTabNavigatorとcreateStackNavigatorを複合的に使うことでヘッダーUIとタブバーUIの配置を実現できるということに。 このエントリーでは、ヘッダーとタブバーの要件を満たすReact Navigationのカスタマイズ方法を紹介したい。 createBottomTabNavigatorでタブバーUIを表示する 以下ソースコードを見てほしい。 createBottomTabNavigator APIを使っている。createBottomTabNavigatorの引数には、オブジェクト形式でHome, Cart, Settingプロパティが確認できる。各プロパティには、さらにオブジェクト形式でscreen, navigationOptionsプロパティがあり、screenに任意のReact.Componentを適用して、navigationOptionsでタブラベルを設定している。 タブバーUI設置は実現しているが、例によってヘッダーUIは表示されない。 createStackNavigatorでヘッダーUIを表示する 以下ソースコードを見てほしい。 行数が増えているが、実は、いたってシンプルだ。前述のソースコードからの変更点は、screenプロパティにcreateStackNavigatorを書いている。以下、差分キャプチャを見てほしい。 createBottomTabNavigatorのscreenにcreateStackNavigatorを展開しているだけだ。オブジェクトがネストして分かりにくさを覚えるが、createBottomTabNavigatorとcreateStackNavigatorのコンポーネントを通して任意のコンポーネントが表示される仕組みになっている。 果たして、タブバーUIとヘッダーUIを表示することができた。 まとめ ヘッダーUIとタブバーUIの要件を満たすReact Navigationのカスタマイズ方法の紹介だった。 「createBottomTabNavigatorのscreenにcreateStackNavigatorを展開している」と表現して、わたし自身があらためてスッキリした。ネストが多くてややこしいのだけれど、createBottomTabNavigatorのつもりで記述を済ませてからcreateStackNavigatorを書き加えると迷子になりにくいかもしれない。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。