【ReactNative】ReactNavigationの基本をまとめる

はじめに

ReactNativeで画面を遷移させる際に使う React Navigation ですが、様々なpropsが用意されているので、簡単にまとめていきたいと思います。

別の画面を指定して遷移させる

定義されたルートの宛先名を指定することで、任意の画面に遷移させることができます。

sample.js

onPress={() =>
  navigate('定義されたルート名', { sampleParam: '任意の引数' })
}

ひとつ前の画面に戻る

goBack() を用いることで、現在表示している画面のひとつ前に戻ることができます。

sample.js

onPress={() => goBack()} // ひとつ前の画面に遷移

複数個前の画面に戻る

pop() を用いることで、現在表示している画面の複数個前に戻ることができます。

sample.js

onPress={() => navigation.pop(2)} // ふたつ前の画面に遷移

ナビゲーション履歴を初期化して遷移する

reset() を使うことで、ナビゲーション履歴を初期化して遷移することができます。

sample.js

onPress={() => navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
})};