【ReactNative開発】React Navigation 6でBottom TabからFull Screen Modalを開く

こんにちは。今週末もReact Nativeの開発を進めております。今日はReact Navigationをまた色々と触ったので、備忘としてこの記事をこ残しておこうと思います。

前提

  • React Native
  • Expo
  • React Navigation v6.x

実現したいこと

画面下部のタブメニューからフルスクリーンのモーダルを開きたい。呼び出し先の画面でタブを表示させたくないのです。

現状は、タブからメニューを開くと、ボトムタブはそのままで画面が切り替わる状況です。

解決方法

このSOの記事がドンピシャでハマりました。タブを構成するStackの上位にRoot Stackなるものを作って、そこに遷移先の画面を含めます。

https://stackoverflow.com/questions/68900300/react-navigation-opening-a-modal-from-the-tab-bar

参考までにBeforeコード

#before
const Tab = createBottomTabNavigator();
const MainFlow = () => {

  return(
    <Tab.Navigator
      defaultScreenOptions={{headerShown:false, headerTransparent:true}}
      screenOptions={({ route }) => ({
        headerShown: false,
                ・・・
      })}
      >
            ・・・・
      ★このままPostBaseを呼び出すと、ボトムタブが残る
      <Tab.Screen name="Write" component={PostScreen}/> 
    </Tab.Navigator>
  )
}

Afterコード

#After
★追加
const PostBase = () => <View style={{ flex: 1 }} />

const Tab = createBottomTabNavigator();
const MainFlow = () => {

  return(
    <Tab.Navigator
      defaultScreenOptions={{headerShown:false, headerTransparent:true}}
      screenOptions={({ route }) => ({
        headerShown: false,
                ・・・
      })}
      >
            ・・・・
            ★空のPostBaseを指定 + listenerを追加
      <Tab.Screen name="Write" component={PostBase}
              listeners={({ navigation }) => ({
                tabPress: (e) => {
                  e.preventDefault()
                  navigation.navigate("Post")
                },
              })}
      />
    </Tab.Navigator>
  )
}
★新規追加。上位コンポーネントからは、上のMainFlowを呼ぶのではなく、このMainRootFlowを呼ぶように変更
const rootStack = createStackNavigator();
const MainRootFlow = () => {
  return (
    <rootStack.Navigator 
      initialRouteName="Main"
      screenOptions={{
        headerShown: false,
      }}
    >
      <rootStack.Screen name="Main" component={MainFlow} />
      <rootStack.Screen name="Post" component={PostStack} />
    </rootStack.Navigator>
  )
}

ふう・・・この記事にたどり着いて実装完了まで2時間くらいかかりました・・・同じことで悩まれている方の参考に少しでもなれば幸いです。(下のイイねボタンポチっていただけますと励みになります!)

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい!という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・!

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。