📚

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

2021/12/03に公開約2,200字

サンプルコード

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

  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",

やりたいこと

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

タブ1のFeedOfFirstTabからタブ2の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

ログインするとコメントできます