React Native Navigation Library - 隐藏底部选项卡

Question

我目前正在使用 React Native Navigation 在 React Native 应用程序中增强导航功能。

为了解释问题，我有两个屏幕，一个用于主页，一个用于搜索屏幕，对于搜索屏幕，有从左到右的导航元素，可让您在应用程序中进一步移动。对于主屏幕，将其视为不需要导航元素的启动屏幕。它上面有两个按钮，允许用户在应用程序中移动。

现在。我的问题是这个。在主屏幕上，导航是隐藏的。

   HomeScreen.options = {
        bottomTabs: {
            visible: false
        },
        topBar: {
            visible: false
        }
    }

在我对底部标签的定义中，主页是一个子条目，没有任何选项。在这种情况下，这样做似乎会在底部选项卡中创建一个我不想出现的附加条目。即 Home Child，在搜索屏幕的底部导航中不应有关联的图标。我错过了什么吗？是否有一种简单的方法可以删除“底部标签”但仍将其保留在相同的结构中？或者有更好的方法吗？

我确实尝试过拥有多个导航器，但是，这似乎也不起作用。

const BOTTOM_TABS: LayoutBottomTabs = {
  id: 'BOTTOM_TABS',
  children: [
    {
      stack: {
        id: 'HOME_TAB',
        children: [
          {
            component: {
              id: 'HOME_SCREEN',
              name: 'HomeScreen',
            }
          }
        ],
        
      },
    },
    {
      stack: {
        id: 'SEARCH_TAB',
        children: [
          {
            component: {
              id: 'SEARCH_SCREEN',
              name: 'SearchScreen',
            }
          }
        ],
        options: {
          bottomTab: {
            text: 'Search',
            icon: require('@resource/icons/tabs/search.png'),
            ...tabConfig,
          },
        },
      },
    },
  ],
};

export default BOTTOM_TABS


 Navigation.setRoot({
    root: {
      bottomTabs: BOTTOM_TABS,
      options: {
        statusBar: {
          backgroundColor: DARK_ORANGE,
          style: 'light',
        },
      },
    },
     

Answer 1

您需要将您的搜索屏幕（包含选项卡）放入堆栈导航器，您也可以在其中拥有您的主屏幕。

这里我使用的是 react-navigation 5

1. 创建一个包含主屏幕和搜索屏幕的堆栈导航器。

<Stack.Navigator>
   <Stack.Screen
     name="HomeScreen"
     component={HomeScreen}
   />
   <Stack.Screen
     name="SearchScreen"
     component={SearchScreen}
   />
</Stack.Navigator>

1. 在 SearchScreen 中，您将创建所需的选项卡。

<Tab.Navigator>
   <Tab.Screen
     name={tabScreenOne}
     component={tabScreenOne}
     options={{
       tabBarLabel: 'tabScreenOne',
     }}
   />
   <Tab.Screen
     name={tabScreenTwo}
     component={tabScreenTwo}
     options={{
      tabBarLabel: 'tabScreenTwo',
     }}
    />
</Tab.Navigator>

如果您需要工作代码示例，请告诉我。