反应导航 5 在嵌套导航中隐藏底部选项卡导航答案

【问题标题】：react navigation 5 hide bottom tab nav in nested navigation反应导航 5 在嵌套导航中隐藏底部选项卡导航
【发布时间】：2020-06-19 08:26:17
【问题描述】：

我的反应导航的结构是这样的：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 组件的屏幕名称“Main”。 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 的父级，两者都只是两个简单的功能组件

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 组件时不隐藏？

根据this question 的回答，我知道如果我将这一行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 组件时，这会完全隐藏底部选项卡。

在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 })，但我无法从堆栈导航器组件获取当前活动屏幕的正确语法？

【问题讨论】：

reactnavigation.org/docs/hiding-tabbar-in-screens

标签： react-native react-navigation react-navigation-stack react-navigation-v5 react-navigation-bottom-tab

【解决方案2】：

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

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

【讨论】：