Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React Native

【ReactNative】Navigationによる画面遷移先への値の受け渡し

どうも、とがみんです。

今回は、React Navigationを用いた画面遷移の際に、遷移先へ値を受け渡す方法についてまとめていきます。

今回作成するもの

今回は、テーブルのセルをタップすると、そのセルの詳細ページに遷移するプログラムを作成します。

セルが持つ情報を詳細ページに渡し、詳細ページに表示されるようにします。

この記事では主に値の受け渡しについてまとめていくので、ナビゲーション機能とテーブルの機能の実装については、以下を参考にしてください。

画面遷移時にパラメータを渡す部分について

TableScreen.jsにて、FlatListrenderItem内に各セルについてのコードが書かれています。

そのセルが選択された時に、詳細画面に遷移するように、TouchableHighlightのコンポーネントにonPress={() => navigation.navigate(“detail”,item)}のように書いています。

そのnavigae()の第二引数にitemを渡していますが、遷移先に渡したい情報はここに指定します。

この第二引数に値を入れることによって、その値はrouteに渡され、

DetailScreen.jsでは、routeを受け取り、その中に格納されているキーがnameの値を取り出し、受け取った値を表示しています。

TableScreen.js

DetailScreen.js

まとめ

React Navigationにおいて、その遷移先に値を渡す方法についてまとめてきました。
gitHubにサンプルコードを上げているのでよければ参考にしてください。

https://github.com/togamin/tableSample3.git

参考

>Passing parameters to routes|React Navigaion