реагировать навигация 5 скрыть нижнюю вкладку навигации во вложенной навигации

Question

Структура моей навигации по реакции выглядит так: BottomTabNavigator => Navigator => Components

Это скелет приложения. 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;

Как вы можете видеть, внутри нижней вкладки у меня есть экранное имя «Main», которое использует компонент 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>
    );              
}

Мой вопрос: как скрыть навигатор нижней вкладки root при переходе к компоненту BuyForm, но не когда go к компоненту 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 }) внутри MyVeranda, когда BuyForm является активным экраном , но я не могу использовать правильный синтаксис для получения текущего активного экрана из компонента навигатора стека?

Answer 1

Действительно, вы можете использовать setOptions в навигации, чтобы установить собственные параметры. Хотя рекомендуется скорее реорганизовать структуру навигации. Это возможно, если вы создадите StackNavigator, не вложенный в TabBar.

  React.useLayoutEffect(() => {
    navigation.setOptions({ tabBarVisible: false });
  }, [navigation]);