Zenn
📚

React Navigationで別タブのスクリーンに遷移させる方法 | React Native

2021/12/03に公開
Android
iOS
React Native
Expo
React Navigation
tech

サンプルコード

こちらに上げています。
試す場合は以下のコマンドを順に実行してみて下さい。

  1. git clone -b react-navigation-stack-screen https://github.com/naoyahieda/react_native_samples.git
  2. cd react_native_samples
  3. yarn install
  4. yarn start --tunnel

バージョン

"react-native": "0.64.3",
"expo": "~43.0.2",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",

やりたいこと

下の図、写真のようなタブ１，タブ２の２つがある際に、
○ タブ１
--→ FeedOfFirstTab (ここから)
--→ NotificationOfFirstTab
○ タブ２
--→ FeedOfSecondTab
--→ NotificationOfSecondTab (ここに)

タブ１のFeedOfFirstTabからタブ２のNotificationOfSecondTabに遷移させたい。

書き方

React Navigationのこちらを参考にしました。

components/screens/FeedScreenOfFirstTab.js (Github)

<TouchableOpacity onPress={()=>{navigation.navigate('タブ2', {screen:"Feed"})}}  style={{padding:10}}>
  <Text>
    Tab 2の「Feed」に遷移する
  </Text>
</TouchableOpacity>

つまり大事な部分は
navigation.navigate('タブ2', {screen:"Notification"}) で
一般化するとnavigation.navigate('ここにタブ名', {screen:"ここにスクリーン名"})
です

遷移先にパラメータを渡したいとき

components/screens/FeedScreenOfFirstTab.js (Github)

<TouchableOpacity onPress={()=>{navigation.navigate('タブ2', {screen:"Notification", params: { title: 'パラメータX' }})}}  style={{padding:10}}>
  <Text>
    Tab 2の「Notification」にパラメータをもって遷移する
  </Text>
</TouchableOpacity>

つまり大事な部分は
navigation.navigate('タブ2', {screen:"Notification", params: { title: 'パラメータX' }}}) で
一般化するとnavigation.navigate('ここにタブ名', {screen:"ここにスクリーン名",params:{ここにパラメータの名前:"ここにパラメータの値"})
です

おまけ

弊社では、現役東大生の家庭教師がかんたんに見つかる家庭教師個人契約アプリカテアプリ東大生を開発、運営しています。ぜひインストールしてみてください！
UIUXでアドバイスなどあればぜひお願いします！

Discussion