taiki-t's diary

React Native, Rails そして雑多な記録: The world is waiting for you to give it a meaning.

日記

なんか翻訳したいなーと衝動が出たのでとりあえずReact Navigationの最初のところだけ訳した。本家のページに反映する方法がよくわかってないし、ざっと訳した感じなのでとりあえずここにおいておく。Docusaurusの仕組みに乗っかって、crowdinというところにアップロードすれば良いぽいけど。 気が向いたらまたやる。


Hello React Navigation · React Navigation (v2)

より

Hello React Navigation

webブラウザではアンカータグ(<a>)を使って異なるページへリンクできます。ユーザがリンクをクリックすると、そのURLがブラウザの履歴スタックに追加されます。ユーザーが戻るボタンを押すと、ブラウザは追加したものを履歴スタックの一番上から取り出します。それにより、現在アクティブなページは1つ前に訪れたページになります。React Nativeには、webブラウザにあるような「最初から存在するグローバルな履歴スタック」といった概念はありません。そうです。ここでReact Navigationが登場します。

React Navigationのスタックナビゲーターによって、アプリはスクリーン間を遷移し、ナビゲーションヒストリーを管理できるようになります。アプリがスタックナビゲーターを1つだけ使うのであれば、概念的にはwebブラウザがナビゲーションステートを処理する方法に似ています。ユーザーの操作に合わせて、アプリはナビゲーションステートに要素の追加と取り出しを行います。そしてその結果、ユーザーは別なスクリーンを見ることになります。この一連の仕組みにおけるwebブラウザとReact Navigationの重要な違いは、React Navigationのスタックナビゲーターはジェスチャーとアニメーションを提供することです。これは通常AndroidiOSでスタック内のルートをナビゲーションする時に期待されるものです。

React Navigationを使い始めるために必要なのはcreateStackNavigatorと呼ばれる関数だけです。

スタックナビゲーターを作る

createStackNavigatorはReactコンポーネントを返す関数です。これはルート設定オブジェクトとオプションオブジェクトをとります(下記の例ではオプションオブジェクトについては一旦省略します)。createStackNavigatorはReact Componentを返すので、App.jsから直接エクスポートしてアプリのルートコンポーネントとして使えます。