Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@risto24

【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' }],
})};
1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
risto24
都内でWEB&アプリ開発者をしています。小規模チームへのアジャイル導入に注力している認定スクラムマスターでもあります。 好きな技術は JavaScript / Node.js / React.js / ReactNative / Firebase / Next.js などです。 Qiitaでは日常の学びや気付きをアウトプットしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?