Question

我的反应导航的结构如下：BottomTabNavigator =>导航器=>组件

这是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本身是一个堆栈导航器，具有两个屏幕组件：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组件时如何隐藏呢？

根据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组件时，这完全隐藏了底部的标签。

在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]);

Answer 2

这是我如何在堆栈中的特定屏幕（Reacat Nav 5.x）中隐藏选项卡栏的方法

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
const ProfileStack = createStackNavigator();
    
const ProfileNavigator = ({ navigation, route }) => {
        React.useLayoutEffect(() => {
            const routeName = getFocusedRouteNameFromRoute(route);
            if (routeName === "Group"){
                navigation.setOptions({tabBarVisible: false});
            }else {
                navigation.setOptions({tabBarVisible: true});
            }
        }, [navigation, route]);
        return(
            <ProfileStack.Navigator screenOptions={{headerShown: false}}>
                <ProfileStack.Screen name="Profile" component={ProfileScreen} />
                <ProfileStack.Screen name="Group" component={GroupScreen} />
            </ProfileStack.Navigator>
        )};

反应导航5在嵌套导航中隐藏底部标签导航

2 个答案: