react-native - 反応ナビゲーション5は、ネストされたナビゲーションでボトムタブのナビゲーションを非表示にします

Question

私の反応ナビゲーションの構造は次のようになります: BottomTabNavigator => Navigator => Components

これは App.js のスケルトンです。アプリケーション全体が下部のタブ ナビゲーションにまとめられています。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const BottomTab = createBottomTabNavigator();

function App() {
  return (  
    <NavigationContainer>     
      <BottomTab.Navigator >
        <BottomTab.Screen
          name="Main"
          component={MyVeranda}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: //...some icon,
          }}
        />
        //...some other screens
      </BottomTab.Navigator>          
    </NavigationContainer>  
  );
}

export default App;

ご覧のとおり、下部のタブ内には、MyVerandaコンポーネントを使用する「メイン」というスクリーン名があります。MyVerandaそれ自体がスタック ナビゲーターであり、2 つの画面コンポーネントがありますMyHome。BuyForm

import { createStackNavigator } from '@react-navigation/stack';

const HomeStack = createStackNavigator();

function MyVeranda({ route,navigation }) {
  //..some states, props, etc

  return (
    <HomeStack.Navigator>
        <HomeStack.Screen
            name="MyHome"
            component={MyHome}
            options={{/*...some options*/ }}
        />  
        <HomeStack.Screen
            name="BuyItem"
            component={BuyForm}
            options={{/*...some options*/}}
        />
    </HomeStack.Navigator>
  );
}

export defaul MyVeranda;

MyVerandaは と の親でMyHomeありBuyForm、どちらも 2 つの単純な機能コンポーネントです

function MyHome({navigation}){  
    //..some states, props, etc

    return (
        <ScrollView contentContainerStyle={{/*...some styling*/}}>
            //...some components
        </ScrollView>
    );  

}

function BuyForm({navigation}){ 
    //..some states, props, etc

    return (
        <ScrollView contentContainerStyle={{/*...some styling*/}}>
              //...some components
        </ScrollView>
    );              
}

私の質問は次のとおりです。コンポーネントに移動するときにルートの下部タブナビゲーターを非表示にする方法ですBuyFormが、コンポーネントに移動するときは非表示にしないでMyHomeください。

この質問の回答に基づいて、この行navigation.setOptions({ tabBarVisible: false })をMyVerandaコンポーネントに配置すると、下部のタブを非表示にできることがわかりました

function MyVeranda({ route,navigation }) {
      //..some states, props, etc
      navigation.setOptions({ tabBarVisible: false })//this hide the bottom tab navigator

      return (
       //...
      )
}

MyHomeしかし、これは、コンポーネントとコンポーネントの両方にいるときに、下部のタブを完全に非表示にしBuyFormます。

呼び出しnavigation.setOptions({ tabBarVisible: false })てBuyFormも何も起こらないようです

function BuyForm({ route,navigation }) {
      //..some states, props, etc
      navigation.setOptions({ tabBarVisible: false }) //this do nothing

      return (
         //...
      )
}

だから私の推測では、アクティブな画面のときにnavigation.setOptions({ tabBarVisible: false })内部で呼び出す必要がありますが、スタックナビゲーターコンポーネントから現在のアクティブな画面を取得するための適切な構文はありませんか?MyVerandaBuyForm