反应导航5在嵌套导航中隐藏底部标签导航 [英] react navigation 5 hide bottom tab nav in nested navigation

问题描述

我的反应导航的结构是这样的:BottomTabNavigator =>导航器=>组件

The structure of my react navigation is like this : BottomTabNavigator => Navigator => Components

这是App.js的框架.整个应用程序包装在底部的标签导航中.

This is the skeleton of the App.js. The whole application is wrapped up in a bottom tab navigation.

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组件的屏幕名称"Main". MyVeranda本身是一个堆栈导航器，它具有2个屏幕组件:MyHome和BuyForm

As you can see, inside the bottom tab i have screen name "Main" that uses MyVeranda component. MyVeranda itself is a stack navigator, which have 2 screens components : MyHome and 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个简单的功能组件

MyVeranda is a parent of MyHome and BuyForm, both are just 2 simple functional components

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组件时如何隐藏呢?

My question is : how to hide the root bottom tab navigator when navigating to BuyForm component, but not when go to MyHome component?

根据此问题的回答，我知道我可以隐藏如果我将navigation.setOptions({ tabBarVisible: false })这一行放在MyVeranda组件中，则位于底部标签

Based from answer of this question, i know that i can hide the bottom tab if i put this line navigation.setOptions({ tabBarVisible: false }) in MyVeranda component

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

      return (
       //...
      )
}

但是当我同时在MyHome和BuyForm组件时，这完全隐藏了底部的选项卡.

But this hide the bottom tab entirely when i am at both MyHome and BuyForm component.

在BuyForm中调用navigation.setOptions({ tabBarVisible: false })似乎无济于事

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

      return (
         //...
      )
}

所以我的猜测是，当BuyForm是活动屏幕时，我必须在MyVeranda内部调用navigation.setOptions({ tabBarVisible: false })，但是我无法通过正确的语法从堆栈导航器组件获取当前的活动屏幕吗?

So my guess is i have to call navigation.setOptions({ tabBarVisible: false }) inside MyVeranda when BuyForm is the active screen, but i cannot the proper syntax to get the current active screen from a stack navigator component?

推荐答案

实际上，您可以在导航上使用setOptions设置自定义选项.尽管建议您重新组织导航结构.如果创建不与TabBar嵌套的StackNavigator，这可能是可能的.

Indeed you can use setOptions on the navigation to set custom options. Although it's recommended to rather reorganize the navigation structure. This might be possible if you create a StackNavigator not nested with the TabBar.

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

这篇关于反应导航5在嵌套导航中隐藏底部标签导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！