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

どうも、とがみんです。

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

Contents

今回作成するもの
画面遷移時にパラメータを渡す部分について
まとめ
参考

今回作成するもの

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

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

【React Native】 pic.twitter.com/WljgcaOMGE
— とがみん@プログラミング (@fresopiya) March 29, 2020

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

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

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

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

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

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

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

TableScreen.js

 renderItem = {({item}) => (
     <TouchableHighlight
         onPress={() => navigation.navigate("detail",item)}
         underlayColor={'red'}
     >
         <View style = {styles.listItem}>
             <Text style = {styles.listTitle}>{item.name}</Text>
         </View>
     </TouchableHighlight>
)}

renderItem = {({item}) => (

<TouchableHighlight

onPress={() => navigation.navigate("detail",item)}

underlayColor={'red'}

</View>

</TouchableHighlight>

)}

DetailScreen.js

 export function DetailScreen({route}){
     const { name }= route.params
     return (
         <View style={styles.container}>
            <Text>{name}</Text>
          </View>
     );
  }