navigation間のパラメータの受け渡し ReactNavigation V5 で画面遷移をクラスで行う方法

目的

• react navigation v5　をクラスで利用する場合に出てくる相違点の記録

以下の続き
https://qiita.com/yukihigasi/items/e320a825e412e9d0b3d5

やりたいこと

• パラメータをナビゲーション間で受け渡したい
• 公式ドキュメントは関数で行なっている
• これをクラスで行えるようにしたい

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

https://reactnavigation.org/docs/params/

対策

• useNavigation の時と同じように、 useRoute Hocを利用する
• 届くオブジェクトの中身は以下のようになっている

Object {
  "key": "xxxx",
  "name": "xxxx",
  "params": Object {
    "渡した時のキー": "渡されたデータ（つまりitemId）",
  },
}

• だから取り出し方は route.params.キー(itemId)

import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';　＜＝useRouteを取得する

export default function(props) {
  const navigation = useNavigation();
  const route = useRoute();                                      <=useRouteを取得する

  return <VID8 {...props} navigation={navigation} route={route} />;　＜＝usenavigationと同じようにrouteをクラスに渡す
}

class VID8 extends React.Component {

  render() {
    const { navigation } = this.props;
    const { route } = this.props;

    return(
      <View style={styles.window}>
        {route.params.group}                     <= routeから、前の画面でnavigation第２引数に渡されたプロパティを取得する

      </View>
    );
  }
}

資料

https://reactnavigation.org/docs/use-route/