0

我的反应导航的结构是这样的：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是MyHomeand的父级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组件时？

根据这个问题的回答，我知道如果我把这条线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

4

2 回答 2

1

这是答案

React Navigation如何从堆栈导航内部隐藏标签栏

于 2020-11-10T18:39:08.330 回答
0

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

  React.useLayoutEffect(() => {
    navigation.setOptions({ tabBarVisible: false });
  }, [navigation]);
于 2020-06-19T08:42:09.927 回答